Menu horizontal que en IE7 sale mal.

[gunther]

bueno como raro lo peor de internet.. IE.. molestando

tengon menu horizontal en todos los navegadores se ve bien, pero en IE7 el primer elemento del menu se ve unos pixeles mas abajo del resto..

este es el codigo.

Código CSS:

#navegacion {
float:left;  
margin: 0px 0px 0px 0px;
}
    
#navegacion ul {
display:inline; 
}   
             
#navegacion li {
float:left; 
list-style:none;  
margin: 0px 0px 0px 24px; 
}
             
#navegacion li a {
text-decoration:none; 
font-family:Arial, Helvetica, sans-serif; 
font-size:13px; 
font-weight:bold; 
color:#FFFFFF;
}
 
#navegacion li a:hover {color:#FEC13E}
 

y este el menu

Código HTML:

<div id="navegacion">
<ul>
  <li> <a href="<?=base_url()?>">Home</a></li>
  <li> <a href="<?=base_url()?>home/registro">Registro </a></li>
  <li> <a href="<?=base_url()?>publicar/comopublicar">Como publicar? </a></li>
  <li> <a href="<?=base_url()?>home/servicios">Servicios </a></li>
  <li> <a href="<?=base_url()?>informacion/ayuda">Ayuda </a></li>
</ul>
</div>
 

el div "navegacion lo uso para posicionar el menu.."

y asi se ve en IE.. en FF y el resto se ven alineados.

[gerangel]

Porque no intentas darle un ancho al div "navegacion" por ej 500px:

#navegacion {
float:left;
margin: 0px;
width: 500px;
}

[gunther]

nop sigue igual...

[gunther]

alguien pls xd?

[gerangel]

Listo, copia este css y dime! :P

Código CSS:

#navegacion {
    float:left;
    margin: 0px;
    width: 600px;
}
    
#navegacion ul {
    display:inline;
}   
             
#navegacion li {
    float:left;
    list-style:none;
    margin: 0px 0px 0px 24px;
    vertical-align: 4px;
}
             
#navegacion li a {
text-decoration:none; 
font-family:Arial, Helvetica, sans-serif; 
font-size:14px; 
font-weight:bold; 
color:#000000;
}
 
#navegacion li a:hover {color:#FEC13E}
 

[gunther]

si señor!! esa era gracias

[daymardvaleroa]

Hola, tengo el mismo problema pero con IE8, he probado varias cosas de diferentes foros y no logro hacer que mis listas se vean horizontales en IE8, que en realidad son tabs.

Aca dejo el codigo para ver si alguien detecta que es lo que me estoy saltando.

<div id="id17" class="tabpanel" onclick="var wcall=wicketAjaxGet('?wicket:interface=:1:tabs::IB ehaviorListener:0:',null,null, function() {return Wicket.$('id17') != null;}.bind(this));">
<div class="tab-row">
<ul>
<li class="tab0 selected">
<a href="#"><span>ADMINISTRACION POLIZAS</span></a>
</li><li class="tab1">
<a href="#"><span>ADMINISTRACION POLIZAS</span></a>
</li><li class="tab2 last">
<a href="#"><span>ADMINISTRACION POLIZAS</span></a>
</li>
</ul>
</div>

y el css

div.tabpanel div.tab-row ul {
margin:0;
padding:0px 70px 0;
list-style:none;
width/*\**/:0px\9;
padding/*\**/:0px\9;
margin/*\**/:0px 100px\9;
list-style-type: none;
}


div.tabpanel div.tab-row li {
float:left;
background:url("../images/button_menu_blue_left.png") no-repeat left top;
height:27px;
padding:0 4px 0 10px;
margin-right/*\**/:5px\9;
margin-top/*\**/:0px\9;
margin-left/*\**/:0px\9;
list-style:none;

}

/**pestañas como tal y letras cuando estan inactivas**/
div.tabpanel div.tab-row a {
display:block;
background:url("../images/tab_blue_right.png") no-repeat right top;
margin-top:0px;
margin-bottom:0px;
padding:5px 14px 0px 5px;
height:27px;
margin-left/*\**/:0px\9;
/*texto*/
font-family:Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #00628C;
text-decoration: none;
white-space:nowrap;
}

div.tabpanel div.tab-row li.selected {
position/*\**/: relative\9;
background-image: url(../images/button_menu_gray_left.png);
padding-right:2px;
margin-right/*\**/:0px\9;
margin-top/*\**/:0px\9;
margin-left/*\**/:0px\9; }