Foros del Web » Creando para Internet » CSS »

Problemas con li class en IE

Estas en el tema de Problemas con li class en IE en el foro de CSS en Foros del Web. Hola tengo un problema existencial, y es que hice un menú vertical con imágenes de productos en html y css, que funciona a la perfección ...
  #1 (permalink)  
Antiguo 04/10/2010, 00:27
 
Fecha de Ingreso: octubre-2010
Mensajes: 3
Antigüedad: 7 años, 2 meses
Puntos: 0
Problemas con li class en IE

Hola

tengo un problema existencial, y es que hice un menú vertical con imágenes de productos en html y css, que funciona a la perfección en todos los navegadores excepto en IE( para variar).

es un menu vertical de X items, compuestos por una lista desordenada, cuyos <li> tienen una imagen "a" de fondo, al hacer rollover se cambia la imagen de fondo a imagen "b" y con un identificador de pagina, la pagina actual tiene la imagen "b" que le corresponde. Una manera practica d ehace run menu facilmente editable sin javascript.

el menu fue estructurado asi:

<div id="columna1">

<ul id="link1">

<li class="link1"><a href="index.html">link1</a><li>
<li class="link2"><a href="index.html">link2</a><li>
/*y varios links mas*/
</ul>

</div>



en el css estaría armado de la siguiente manera:

#columna1 li.link1 {
width:140px;
height: 70px;
background:url(../imagenes/img1a.gif)no-repeat;
text-decoration: none;
}

#columna1 li.link2:hover {
background:url(../imagenes/img1b.gif)no-repeat;
}

#columna1 li.link2 {
width:140px;
height: 70px;
background:url(../imagenes/img2a.gif)no-repeat;
text-decoration: none;
}

#columna1 li.link1:hover {
background:url(../imagenes/img2b.gif)no-repeat;
}

/* estos a continuacion son los identificadores*/
ul#link1 li.link1{
background:url(../imagenes/img1b.gif)no-repeat;
}
ul#link2 li.link2{
background:url(../imagenes/img2b.gif)no-repeat;
}

/*y asi sucesivamente con todos los otros links*/



Descubri que la problemática es que el IE no lee la imagen de fondo en una clase de un <li>, y eso supondria un error en el orden de lectura de las clases, o algun otro problema que desconozco, ya que el IE siempre complica la vida.

alguien podria ayudarme a resolver esto??

existe algun hack para cambiar el css segun el explorador?
o algun error que se haya cometido en el css??

el que necesite que le pase el trabajo, solo pedirmelo y se lo paso resumido.
  #2 (permalink)  
Antiguo 04/10/2010, 10:58
 
Fecha de Ingreso: mayo-2010
Ubicación: Lima, Peru.
Mensajes: 176
Antigüedad: 7 años, 6 meses
Puntos: 6
Respuesta: Problemas con li class en IE

Hola, marcosribero

no sé que version de IE estes usando pero hasta la versión 6, reconoce el background en las etiquetas <li>, y si supuesta-mente tu menú es para x-items creo que tu css esta incompleto o lo podrías mejorar...

acá el aporte de un compañero de la comunidad para que te des una idea de como lo podrías implementar mejor y también sus ejemplos están validados para IE6

http://www.forosdelweb.com/f53/faqs-...ml#post2453726

y te dejo otro link donde aplico el background-image y background-position en las listas

http://probandoindexz.webcindario.com/pan.html

Saludos DTB
  #3 (permalink)  
Antiguo 04/10/2010, 11:36
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 5.827
Antigüedad: 9 años, 9 meses
Puntos: 953
Respuesta: Problemas con li class en IE

pregunta: ¿tu problema radica en el hover de dicha clase?

si es así apostaría a que no has declarado el DOCTYPE

en IE hay muchas cosas que no se interpretan correctamente si no declaras un DOCTYPE
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....
  #4 (permalink)  
Antiguo 04/10/2010, 12:18
 
Fecha de Ingreso: octubre-2010
Mensajes: 3
Antigüedad: 7 años, 2 meses
Puntos: 0
Respuesta: Problemas con li class en IE

muchas gracias.

ahora subo un ejemplo a internet para que vean de que va la mano.

lo que3 me di cuenta:
en el ejemplo que me pasastes http://probandoindexz.webcindario.com/pan.html
me fije que la imagen de fondo se aplica a el <li> perteneciente a una clase de <ul>, mientras que yo lo aplico a una clase de <li>...
tendra algo que ver con que IE no me lee bien una clase declarada dentro de un id( columna 1)?

ayuda con esa pregunta y muchisimas gracias por la ayuda.

__________________________________________________ _______________________

juntemos firmas para cerrar IE.
  #5 (permalink)  
Antiguo 04/10/2010, 12:30
 
Fecha de Ingreso: mayo-2010
Ubicación: Lima, Peru.
Mensajes: 176
Antigüedad: 7 años, 6 meses
Puntos: 6
Respuesta: Problemas con li class en IE

Hola, de repente en parte involucre ese codigo, prueba poniendo

#columna1 ul li.link1 { code css}

Editando...

me acabo de dar cuenta que el código que pones en morado, esta erróneo y lo considero innecesario...
ya que con solo un <ul> puedes hacerlo y en tu codigo pones

Código CSS:
Ver original
  1. ul#link1 li.link1{
  2. background:url(../imagenes/img1b.gif)no-repeat;
  3. }
  4. ul#link2 li.link2{
  5. background:url(../imagenes/img2b.gif)no-repeat;
  6. }

y yo no veo el ID link2 solo veo que agregas la clase link2 a una etiqueta <li> dentro del ID link1 :S

Saludos DTB
  #6 (permalink)  
Antiguo 04/10/2010, 16:04
Avatar de Tecna  
Fecha de Ingreso: enero-2010
Mensajes: 291
Antigüedad: 7 años, 11 meses
Puntos: 45
Respuesta: Problemas con li class en IE

Buenas,

el problema que mencionas en ie6 se arregla dejando un espacio en blanco entre el paréntesis de cierre de la ruta de la imagen y no-repeat, al declarar la propiedad background.
  #7 (permalink)  
Antiguo 08/10/2010, 09:33
 
Fecha de Ingreso: octubre-2010
Mensajes: 3
Antigüedad: 7 años, 2 meses
Puntos: 0
Respuesta: Problemas con li class en IE

TECNA,

sos genial!

ESE ERA EL FUCKIN PROBLEMA

LO DE LOS ESPACIOS!!!!!!!!

holy shit, que boludez!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! !!!!!!


MIL GRACIAS!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! !!!!!!!!!!!!!!!!!!!

me alegrastes la semana


muchisimas gracias a todos por la ayuda!!!!!!!!!!!

Etiquetas: explorer, internet, listas
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 00:29.