¿Qué hay de malo con este elemento HTML5 <address>?

Question

<div id="header-container"> 
     <address> 
     <ul> 
      <li>lorem ipsum</li> 
      <li>(xxx) xxx-xxxx</li> 
     </ul> 
    </address> 
</div> 

Y el CSS tiene el siguiente aspecto:

#header-container address {float: right; margin-top: 25px;} 

Cuando me carga la página, se ve bien en Chrome & IE, pero en Firefox está ignorando por completo el estilo. Cuando veo fuente en Firefox se ve como el anterior, pero en Firebug se ve así:

<div id="header-container"> 
    <address> </address> 
    <ul> 
     <li>lorem ipsum</li> 
     <li>(xxx) xxx-xxxx</li> 
    </ul> 
</div> 

Answer 1

HTML5 es todavía un borrador. Firefox 3.6 aún no es completamente compatible con HTML5.

Y de acuerdo con la HTML4 spec, address sólo pueden contener elementos: inline

<!ELEMENT ADDRESS - - (%inline;)* -- information on author --> 
<!ATTLIST ADDRESS 
    %attrs;        -- %coreattrs, %i18n, %events -- 
    > 

Esta es la razón por Firefox considera inválida y sus saltos de página.

Answer 2

Agregar bloque de visualización a CSS. Y luego, agregue clear_both div antes de cerrar la dirección. Esto arreglará cualquier problema con elementos de bloque dentro de uno en línea.

Su CSS:

#header-container address {display: block; float: right; margin-top: 25px;} 
.clear { clear: both; } 

HTML:

<div id="header-container"> 
    <address> 
    <ul> 
     <li>lorem ipsum</li> 
     <li>(xxx) xxx-xxxx</li> 
    </ul> 
    <div class="clear"></div> 
    </address> 
</div> 

Answer 3

Una lista sin orden no se puede ajustar dentro de una etiqueta de dirección. Comprobé usando firebug y Firefox mueve la etiqueta de dirección cercana antes de la lista desordenada.