Foros del Web » Creando para Internet » CSS »

menu que se deforma en IE

Estas en el tema de menu que se deforma en IE en el foro de CSS en Foros del Web. 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; ...
  #1 (permalink)  
Antiguo 11/07/2008, 07:22
Avatar de PedroRodas  
Fecha de Ingreso: noviembre-2005
Ubicación: Cádiz
Mensajes: 393
Antigüedad: 18 años, 3 meses
Puntos: 0
menu que se deforma en IE

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
__________________
Genial concierto de Roger Waters, Pink Floyd siguen vivos!!!
  #2 (permalink)  
Antiguo 11/07/2008, 07:28
Avatar de Anarninquë
Colaborador
 
Fecha de Ingreso: julio-2005
Ubicación: MVD | Uruguay
Mensajes: 1.096
Antigüedad: 18 años, 8 meses
Puntos: 28
Respuesta: menu que se deforma en IE

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
__________________
Marcelo Ferreiro - Desarrollador Web
Mi Web - Pixelar.me
  #3 (permalink)  
Antiguo 11/07/2008, 07:52
Avatar de PedroRodas  
Fecha de Ingreso: noviembre-2005
Ubicación: Cádiz
Mensajes: 393
Antigüedad: 18 años, 3 meses
Puntos: 0
Respuesta: menu que se deforma en IE

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.
__________________
Genial concierto de Roger Waters, Pink Floyd siguen vivos!!!
  #4 (permalink)  
Antiguo 11/07/2008, 09:39
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 5 meses
Puntos: 280
Respuesta: menu que se deforma en IE

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.
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 21:21.