Error con CSS y <li> en Firefox

[agd]

Buenas.. estoy haciendo un menu con las etiquetas <ul> <li>, el codigo que tengo es el siguiente:

Código HTML:

<ul>
  <a href="#">
    <li>
      Inicio
    </li>
  </a>
 <a href="#">
    <li>
      La empresa
    </li>
  </a>
 <a href="#">
    <li>
     Contacto
    </li>
  </a>
</ul> 

y en el CSS le doy "forma" al menu.. el problema es que con firefox me aparece como si hubiera hecho el codigo de la siguiente manera:

Código HTML:

<ul>
<a href="#">
    <li>
                      <-- Espacio en blanco
    </li>
  </a>
  <a href="#">
    <li>
      Inicio
    </li>
  </a>
<a href="#">
    <li>
                      <-- Espacio en blanco
    </li>
  </a>
<a href="#">
    <li>
                      <-- Espacio en blanco
    </li>
  </a>
 <a href="#">
    <li>
      La empresa
    </li>
  </a>
<a href="#">
    <li>
                      <-- Espacio en blanco
    </li>
  </a>
<a href="#">
    <li>
                      <-- Espacio en blanco
    </li>
  </a>
 <a href="#">
    <li>
     Contacto
    </li>
  </a>
<a href="#">
    <li>
                      <-- Espacio en blanco
    </li>
  </a>
</ul> 

es decir me crea un <li> vacio sobre y debajo de uno que yo haya creado.. en Google Chrome funciona perfecto..

Espero que alguien sepa cual es el error y me lo pueda decir :)

Muchas Gracias

[YamilG]

En teoría lo que debería tener el link (anchor) debería ser el elemento de texto que está dentro de las listas, probá hacer lo siguiente:

En vez de tener esto:

Código HTML:

<ul>
  <a href="#">
    <li>
      Inicio
    </li>
  </a>
</ul> 

anidalo de la siguiente manera:

Código HTML:

<ul>
  <li>
     <a href="#">Inicio</a>
  </li>
 </ul> 

Éxitos

[alejuss]

Buscando un error similar a este vine a dar con este foro, mil gracias! no podía encontrarle la vuelta

[Calizman]

Saludos!!

Efectivamente, la solucion es esa, pero... porque?

Sencillo: la etiqueta <a> (al igual que img, span, etc...) son elementos de linea y otras etiquetas como <div> (div, h1, h2, li, etc...) son elementos de bloque. La diferencia entre ambos es que los elementos de bloque ocupan una linea, por lo que al poner otro elemento, este aparecerá como si hubiera un salto de linea (o muchos espacios, en este caso) y los elementos de linea, aparecen uno a el lado de otro sin necesidad de hacer saltos de linea.

Segun el estándar XHTML, Un elemento de bloque, puede contener elementos de linea y de bloque, pero los elementos de linea solo pueden contener otros elementos de linea.

Espero haberme explicado... Hasta Luego!!

PD: Referencia: Elementos de Bloque vs Elementos de linea