error CSS sprites en Explorer

[kahlo84]

Hola, he creado un menú con CSS sprites y resulta que va bien en Firefox y Chrome pero no en el Explorer, en el que cada botón enlaza a una categoría que no es... el menú lo podéis ver en www.ostraspedrin.net

cómo lo puedo arreglar?

[joseoliveras]

Hola
¿Que versión de explorer?
¿Puedes pegar el texto html y css?, gracias

[kahlo84]

Pues me da error con el Explorer 8. Te paso aquí los códigos:

Código:

.navi1 {
  display: block;
  height: 78px;

  width: 935px;
}
.navi1 ul {
  float: none;
 
}
.navi1 ul li {
  height: 78px;
  background-image: url(http://i1188.photobucket.com/albums/z415/jcarlosc84/menu2-1.jpg);
  background-repeat: no-repeat;
  float: left;
  margin: 0px;
}

.navi1 ul li.home { background-position: 0px 0px; left: 0px; width: 85px; }
.navi1 ul li.looks { background-position: -85px 0px; left: 85px; width: 85px; }
.navi1 ul li.belleza { background-position: -170px 0px; left: 170px; width: 85px; }
.navi1 ul li.viajes { background-position: -255px 0px; left: 255px; width: 85px; }
.navi1 ul li.shopping { background-position: -340px 0px; left: 340px; width: 85px; }
.navi1 ul li.lector { background-position: -425px 0px; left: 425px; width: 85px; }
.navi1 ul li.featuring { background-position: -510px 0px; left: 510px; width: 85px; }
.navi1 ul li.premios { background-position: -595px 0px; left: 595px; width: 84px; }
.navi1 ul li.varios { background-position: -680px 0px; left: 680px; width: 84px; }
.navi1 ul li.roypedrin { background-position: -765px 0px; left: 765px; width: 84px; }
.navi1 ul li.contacto { background-position: -850px 0px; left:862px; width:85px; }
.navi1 ul li:hover { z-index: 1000; }
.navi1 ul li.home:hover { background-position: 0px -78.1px; }
.navi1 ul li.looks:hover { background-position: -85px -78.1px; }
.navi1 ul li.belleza:hover { background-position: -170px -78.1px; }
.navi1 ul li.viajes:hover { background-position: -255px -78.1px; }
.navi1 ul li.shopping:hover { background-position: -340px -78.1px; }
.navi1 ul li.lector:hover { background-position: -425px -78.1px; }
.navi1 ul li.featuring:hover { background-position: -510px -78.1px; }
.navi1 ul li.premios:hover { background-position: -595px -78.1px; }
.navi1 ul li.varios:hover { background-position: -679px -78.1px; }
.navi1 ul li.roypedrin:hover { background-position: -764px -78.1px;}
.navi1 ul li.contacto:hover { background-position: -850px -78.1px;  }

Código:

<div class="navi1">
      <ul>
        <a href="http://www.ostraspedrin.net"><li class="home"></li></a>
        <a href="http://www.ostraspedrin.net/p/looks.html"><li class="looks"></li></a>
        <a href="http://www.ostraspedrin.net/p/belleza.html"><li class="belleza"></li></a>
        <a href="http://www.ostraspedrin.net/p/viajes.html"><li class="viajes"></li></a>
        <a href="http://www.ostraspedrin.net/p/shopping.html"><li class="shopping"></li></a>
        <a href="http://www.ostraspedrin.net/p/lector.html"><li class="lector"></li></a>
        <a href="http://www.ostraspedrin.net/p/featuring.html"><li class="featuring"></li></a>
        <a href="http://www.ostraspedrin.net/p/premios.html"><li class="premios"></li></a>
        <a href="http://www.ostraspedrin.net/p/varios.html"><li class="varios"></li></a>
        <a href="http://www.ostraspedrin.net/p/ro-y-pedrin.html"><li class="roypedrin"></li></a>
        <a href="http://www.ostraspedrin.net/p/contacto.html"><li class="contacto"></li></a>
     </ul>
    </div>

Muchas gracias de antemano por vuestro tiempo.

[joseoliveras]

Lo primero que tienes que hacer es meter los links dentro del <li>

Código HTML:

<ul>
<li><a href=""></a></li>
</ul>
 

[kahlo84]

Al hacer eso me dejan de funcionar todos los enlaces :S

[joseoliveras]

[URL="http://jsfiddle.net/joseoliveras/3uXeb/"]Aqui te he dejado[/URL] una demo de como hacerlo

[kahlo84]

Gracias, creo que lo tengo tal y como me has puesto pero sigue sin funcionar.

Código:

<ul>
        <li class="home"><a href="http://www.ostraspedrin.net"></a></li>
        <li class="looks"><a href="http://www.ostraspedrin.net/p/looks.html"></a></li>
        <li class="belleza"><a href="http://www.ostraspedrin.net/p/belleza.html"></a></li>
        <li class="viajes"><a href="http://www.ostraspedrin.net/p/viajes.html"></a></li>
        <li class="shopping"><a href="http://www.ostraspedrin.net/p/shopping.html"></a></li>
        <li class="lector"><a href="http://www.ostraspedrin.net/p/lector.html"></a></li>
        <li class="featuring"><a href="http://www.ostraspedrin.net/p/featuring.html"></a></li>
        <li class="premios"><a href="http://www.ostraspedrin.net/p/premios.html"></a></li>
        <li class="varios"><a href="http://www.ostraspedrin.net/p/varios.html"></a></li>
        <li class="roypedrin"><a href="http://www.ostraspedrin.net/p/ro-y-pedrin.html"></a></li>
        <li class="contacto"><a href="http://www.ostraspedrin.net/p/contacto.html"></a></li>
     </ul>

[joseoliveras]

Fijate que la CSS es diferente.
Si me la pones la reviso.

Edito: Te falta incluir el link en cada lista.

[kahlo84]

Muchas gracias, al final ya lo pude solucionar.

Un saludo.