menu que se deforma en IE

PedroRodas · #1 (**permalink**) 11/07/2008, 07:22

hola tengo el siguiente menu horizontal:

Código HTML:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="ContentType" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#contenedor{
width:768px;
height: auto!important;
margin: 0px auto;
background:#fff;
font: normal 0.7em Verdana, Arial, Helvetica, sans-serif;
}
#menu{
margin-bottom:30px;
}
#menu ul { list-style-type: none;
width: 768px;
display: inline;
font: bold 1.2em Verdana, Arial, Helvetica, sans-serif;
}
#menu ul li {
/*border-top:#900 solid 3px;*/
border-bottom:#900 solid 3px;
text-align: center;
float: left;
width: 20%;
}
#menu ul li a:link, ul li a:visited { 
display: block;
padding: 0.25em 0px;
text-decoration: none;
color: #900;
}
#menu ul li a:hover {
color: #000;
}
#menu ul li a:active { 
text-decoration: none;
color: #000;
</style>
</head>
<body>
	<div id="contenedor">
	<div id="menu">
		<ul>
			<li><a href="#" title="Mis trabajos">| &nbsp;Trabajos&nbsp; |</a></li>
			<li><a href="descargas/PEDRO_RODAS_CV.doc" title="descargar el curriculum vitae">| &nbsp;Descargar C.V&nbsp; |</a></li>
			<li><a href="contacto.php" title="Ir a formulario de contacto">| &nbsp;Contacto&nbsp; |</a></li>
			<li><a href="sobremi.php" title="Informacion sobre mi">| &nbsp;Sobre m&iacute;&nbsp; |</a></li>
			<li><a href="portafolio.php" title="PDF con algunos de mis trabajos">| &nbsp;Portafolio&nbsp; |</a></li>
		</ul>		
	</div>
	</div>
</body>
</html>

En firefox va bien pero IE, la ultima opcion del menu se coloca en la siguiente linea. No se muy bien como arreglarlo sin cambiar drasticamente el codigo.

Gracias de antemano por cualquier sugerencia

Anarninquë · #2 (**permalink**) 11/07/2008, 07:28

En IE6 ya lo solucionas con un pequeño hack, dandole 19% al width de #menu ul li

Código HTML:

#menu ul li {
/*border-top:#900 solid 3px;*/
border-bottom:#900 solid 3px;
text-align: center;
float: left;
width: 20%;
*width:19%;
}

Si cuentas con una hoja de estilos externa solo para IE (utilizando comentarios condicionales para incluirla o similar) puedes poner el hack ahi y quitarlo de la hoja de estilos principal, en otro caso omite este párrafo

Espero te haya ayudado, un saludo

PedroRodas · #3 (**permalink**) 11/07/2008, 07:52

gracias por responder, pero no me sirve porque se reduce demasiado el menu y queda descuadrado con respecto a los elementos superior e inferior de la pagina, se nota un espacio en el lado derecho que corresponde a la reduccion del menu.

Mikmoro · #4 (**permalink**) 11/07/2008, 09:39

Una solución sería poner una clase al último elemento:

<li class="ultimo">

y añadir este selector:

#menu ul li.ultimo {width: 19.5%;}

Mikel.