Menú básico se cae a la derecha en IE

rw523252 · #1 (**permalink**) 18/02/2011, 15:38

Hola éste es un menú básico, que cuando lo veo en IE se cae a la derecha, me gustaría si pudieran ayudarme a modificar el código, para que funcione correctamente, desde ya gracias, y saludos.

Código HTML:

Ver original<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">Institucional</a></li>
  <li><a href="#">Agenda</a></li>
  <li><a href="#">Contacto</a></li>
</ul>

Código CSS:

Ver originalul {list-style:none;
margin: 0px;
padding:0px}
 
li a {width:120px;
height:21px;
display:block;
background-color:#99CCFF;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
text-align:center;
padding-top:5px;
margin-left:5px; 
color:#000000;
text-decoration:none;
float:left}
 
li a:hover {background-color:#006699;
color:#FFFFFF;
font-weight:bold}

sanxuan · #2 (**permalink**) 18/02/2011, 19:43

Puedes modificar la regla ul con las siguientes propiedades:
margin:0 auto;
width:500px; /* creo que esa medida funcionará (125 x 4 enlaces), si no prueba a cambiarla */

rw523252 · #3 (**permalink**) 18/02/2011, 19:51

Gracias por responder sanxuan, lo pruebo y posteo como me fue, saludos.

rw523252 · #4 (**permalink**) 18/02/2011, 20:04

Recién probé, pero se siguen cayendo a la derecha, gracias de todos modos, saludos.

sanxuan · #5 (**permalink**) 18/02/2011, 20:28

Yo he probado sólo con el código que nos diste. Si ese ul está incluido dentro de algo que no esté centrado, no se podrá centrar.
Si colocas el código HTML y CSS o un enlace a tu página podremos ayudarte mejor.

rw523252 · #6 (**permalink**) 18/02/2011, 21:19

Hola sanxuan, pasa que es un ejercicio que nos dieron en el curso de web, y lo veo mal en IE, y pensé que yo lo había copiado mal, ya estoy renegando mucho con IE, je je y quiero aprender bien para no pasar tantos sobresaltos, saludos, y gracias.

rw523252 · #7 (**permalink**) 18/02/2011, 21:54

sanxuan, lo pude modificar, y hacer que se vea horizontal, le agregué

Código HTML:

Ver originalli { display: inline; }

y modifiqué en li a

Código HTML:

Ver originaldisplay:block;

por

Código HTML:

Ver originaldisplay:inline-block;

Ahora se ve bien en IE, saludos.

sanxuan · #8 (**permalink**) 19/02/2011, 07:27

Me alegro de que lo hayas solucionado.
Te dejo el código que yo usé por si lo quieres examinar. Salvo que esté equivocado, creo que sólo añado los cambios que te indiqué.
Tal vez no hubieses incluido la etiqueta <!DOCTYPE>. No encuentro otra explicación a que no funcionase.

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head>
<title> Titulo </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<style type="text/css"> 
ul {
   list-style:none;margin: 0 auto;
   width:500px;/* cambiado */
   padding:0px;/* cambiado */
}
li a {
   width:120px;
   height:21px;
   display:block;
   background-color:#99CCFF;
   font-family:Arial, Helvetica, sans-serif;
   font-size:12px;
   text-align:center;
   padding-top:5px;
   margin-left:5px;
   color:#000000;
   text-decoration:none;
   float:left
} 
li a:hover {
   background-color:#006699;
   color:#FFFFFF;
   font-weight:bold
}
</style> 
</head> 
<body> 
<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">Institucional</a></li>
  <li><a href="#">Agenda</a></li>
  <li><a href="#">Contacto</a></li>
</ul>
</body> 
</html>

rw523252 · #9 (**permalink**) 19/02/2011, 10:05

Hola sanxuan, gracias por pasarme el código, lo copio y lo llevo a dreamweaver, siempre es bueno tener variantes para usar, saludos.

rw523252 · #10 (**permalink**) 19/02/2011, 10:06

Hola sanxuan, gracias por pasarme el código, lo copio y lo veo en dreamweaver, siempre es bueno tener variantes para usar, saludos.