24 abril 2010 in Otras Cosas by dacho

Sigo añadiendo mas documentacion a la seccion de errores mas comunes de internet explorer 6, Lo correcto en cuanto a maquetacion web es que cuando creamos menues de navegacion utilicemos una lista HTML (UL LI) y dentro de la misma colocamos los enlaces que necesitamos. Cuando queremos crear listas de navegacion Horizontales asi:

Listas horizontales en navegadores estandares

una de las formas de hacerlo seria por ejemplo…

HTML:

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

CSS:

 
ul {
    list-style: none;
}
 
ul li a {
   	display: block;
   	width: 130px;
	height: 30px;
   	text-align: center;
   	color: #fff;
   	float: left;
	background: #95CFEF;
	border: solid 1px #36F;
	margin: 30px 5px;
}

Pero Esto no funciona bien en internet explorer(en realidad esta mal planteado desde mi punto de vista, pero hay gente que lo hace asi):

Como se ve una lista horizontal en IE6

La solucion para esto es muy simple, El problema viene porque en realidad no flotamos los elementos de la lista, sino que flotamos los enlaces que estan adentro de la lista (ul li a) y nunca lo hacemos en (ul li), la solucion es añadir:

ul li {
	float: left;
}

Tambien podemos eliminar el float:left de el elemento ul li a ya que esta de mas.

Moraleja:

Es Importante que sepamos a que elemento debemos flotar realmente, en este caso el error viene de tratar de flotar el enlace y no la lista que lo contiene. Es decir en CSS como ya lo dije en el curso de HTML y CSS todo se ve como cajas, tenemos la caja del ul, adentro muchas cajas de el li y adentro de las cajas del li tenemos una caja con el enlace (a), lo correcto en este caso es flotar el elemento li, por lo que en realidad el error de internet explorer no es realmente tan grave desde mi punto de vista, pero puede causar algunos dolores de cabeza.

Referencia para las imagenes: 9 Most Common IE Bugs and How to Fix Them

Entradas Relacionadas: