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.
