Foros del Web » Creando para Internet » CSS »

Problema con imagenes en menu simple con ie8

Estas en el tema de Problema con imagenes en menu simple con ie8 en el foro de CSS en Foros del Web. Hola tengo el siguiente problema: Un menú simple con imágenes que se ve perfecto en todos los navegadores, peeeeeeeeeeeeeeeero, como era de esperarse, en ie ...
  #1 (permalink)  
Antiguo 09/02/2011, 19:57
Avatar de a_brillarmiamor  
Fecha de Ingreso: junio-2010
Mensajes: 26
Antigüedad: 7 años, 6 meses
Puntos: 0
Pregunta Problema con imagenes en menu simple con ie8

Hola tengo el siguiente problema:
Un menú simple con imágenes que se ve perfecto en todos los navegadores, peeeeeeeeeeeeeeeero, como era de esperarse, en ie 8. las imagenes que serian los separadores de los links del menu bajan por una razon que la desconosco...

algo asi seria...[URL="http://www.flickr.com/photos/[email protected]/5432594412/lightbox/"]acá una imagen del problema
[/URL]



El html es el siguiente...


<ul>
<li><a href="/">Home</a></li>
<div class="separa_menu"></div>
<li><a href="/empresas/">Empresas</a></li>
<div class="separa_menu"></div>
<li><a href="/directorio/">Directorio</a></li>
<div class="separa_menu"></div>
<li><a href="/terminos">Terminos y Condiciones</a></li>
<div class="separa_menu"></div>
<li><a href="/contacto">Contáctenos</a></li>
<div class="separa_menu"></div>
<li>
<a href="/login">Login</a> </li>
</ul>
<div class="separa_menu_bajo"></div>
</div>


Y el Css es este...

.header ul{
height: 16px;
margin-bottom: 0;
margin-top: 0;
padding: 5px;
width: 576px;}

.header .menu{
margin:auto;
width:576px;}

.header .menu li{
float:left;
list-style:none;
display:block;
margin-left:15px;
margin-right:15px;}

.menu .separa_menu{
float:left;
background: url(../images/sprite_cajas_fondos_repeat-y.png) 0 0 repeat-y;
width:2px;
height:16px;
overflow: hidden;}

.header .menu li a{
text-decoration:none;
font-size:12px;
font-weight:bold;
font-family:Arial;
color:#FFF;}

.separa_menu_bajo{
height:2px;
width:576px;
background:url(../images/sprite_cajas_fondos_repeat-x.png) 0 -470px repeat-x;
float:left;
margin-bottom: 8px;}


Espero que alguien me salve, gracias desde ya...
  #2 (permalink)  
Antiguo 10/02/2011, 09:11
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 6 años, 11 meses
Puntos: 36
Respuesta: Problema con imagenes en menu simple con ie8

Prueba a validar tu código aquí: http://validator.w3.org/unicorn/
Un código HTML con errores no puede tener garantías de mostrarse correctamente.
Supongo que tus divs separadores podrían ser otro <li> o estar incluidos dentro de uno.
Mi experiencia con IE8 no es tan mala. En general obtengo los mismos resultados que con otros navegadores.
  #3 (permalink)  
Antiguo 10/02/2011, 11:45
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Problema con imagenes en menu simple con ie8

Cita:
<ul>
<li><a href="/">Home</a></li>
div class="separa_menu"></div>
<li><a href="/empresas/">Empresas</a></li>
<div class="separa_menu"></div>
<li><a href="/directorio/">Directorio</a></li>
<div class="separa_menu"></div>
<li><a href="/terminos">Terminos y Condiciones</a></li>
<div class="separa_menu"></div>
<li><a href="/contacto">Contáctenos</a></li>
<div class="separa_menu"></div>
<li><a href="/login">Login</a> </li>
</ul>
<div class="separa_menu_bajo"></div>
</div>
Los únicos hijos que admiten las listas /ul/ son los /li/
Esos div que tacho no pueden estar fuera de su correspondiente /li/
Amén de ser todo un atentado a la semántica del código el utilizar cajas (div) vacíos sólo a efectos estéticos.
Siempre puede colocar ese elemento separador dentro de cada /li/ vía background con su padding lateral correspondiente.

Etiquetas: imagenes, simple
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 06:01.