problema con sprites en ie 6 y 8

walterfcr · #1 (**permalink**) 07/05/2011, 22:12

estoy usando esa tecnica de sprites para un menu y se ve bien en todo pero en ie 6 y 8 sale bien descuadrado. les dejo el codigo a ver si hizo falta algo

Código:

<ul class="menuholder"> 
    <li class="menu_inicio"><a href="#" title="inicio" ></a></li> 
    <li class="menu_mercaderia"><a href="musica.html" title="mercaderia"></a></li> 
    <li class="menu_contactenos"><a href="#" title="contactenos"></a></li> 
</ul>

Código:

.menuholder li {float:left;}
.menuholder a {background:url(images/menuh-trans.png);display:block; background-repeat:no-repeat;  height:30px; text-indent:-9000%; outline: none;}


/*ESTADO NORMAL*/
.menu_inicio a {width:141px;}
.menu_mercaderia a {width:216px; background-position:-141px 0px;}
.menu_contactenos a {width:498px; background-position:-357px 0px;}



/*ESTADO ROLLOVER*/
.menu_inicio a:hover {background-position:0px -30px;}
.menu_mercaderia a:hover{background-position:-141px -30px;}
.menu_contactenos a:hover {background-position:-357px -30px;}

walterfcr · #2 (**permalink**) 07/05/2011, 23:40

bueno creo que el problema es el codigo de la pagina porque acabo de ver que ya no funcionan bien varias cosas en ie8

se descuadran los sprites, un jquery de zoom no funciona, la imagen de fondo de la cabecera se agrando y solo en ie8 y 6
ayer si funcionaba todo bien y hoy agregue los menus y se fue todo a la mierda y no se porque

aca dejo el html

Cita:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin título</title>
<link href="style2.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" media="screen" type="text/css" href="jzoom/zoomimage.css" />
<link rel="stylesheet" media="screen" type="text/css" href="jzoom/custom.css" />
<script type="text/javascript" src="jzoom/jquery.js"></script>
<script type="text/javascript" src="jzoom/eye.js"></script>
<script type="text/javascript" src="jzoom/utils.js"></script>
<script type="text/javascript" src="jzoom/zoomimage.js"></script>
<script type="text/javascript" src="jzoom/layout.js"></script>







</head>

<body>

<div id="fondo2"><img src="images/fondo.jpg" width="100%" /></div>

<div id="maincontainer">

<div id="topsection">

<ul class="menuholder">
<li class="menu_inicio"><a href="#" title="inicio" ></a></li>
<li class="menu_mercaderia"><a href="musica.html" title="mercaderia"></a></li>
<li class="menu_contactenos"><a href="#" title="contactenos"></a></li>
</ul>

</div>

<div id="contentwrapper">
<div id="contentcolumn">

<div id="galeria">

<ul>
<li><a href="images/camisa.jpg" title="Seashell" class="example2"><img src="images/camisapeq.jpg" alt="Seashell" /></a><br><p>nombre de camiseta</p></br></li>

<li><a href="images/camisa.jpg" title="Seashell" class="example2"><img src="images/camisapeq.jpg" alt="Seashell" /></a><br><p>nombre de camiseta</p></br></li>
<li><a href="images/camisa.jpg" title="Seashell" class="example2"><img src="images/camisapeq.jpg" alt="Seashell" /><span>Descripción de la imagen</span></a></li>
<li><a href="images/camisa.jpg" title="Seashell" class="example2"><img src="images/camisapeq.jpg" alt="Seashell" /><span>Descripción de la imagen</span></a></li>
<li><a href="images/camisa.jpg" title="Seashell" class="example2"><img src="images/camisapeq.jpg" alt="Seashell" /><span>Descripción de la imagen</span></a></li>
<li><a href="images/camisa.jpg" title="Seashell" class="example2"><img src="images/camisapeq.jpg" alt="Seashell" /><span>Descripción de la imagen</span></a></li>
</ul>
</div>
</div>
</div>

<div id="leftcolumn">
<img src="images/imagen prueba.jpg" /></div>

<div id="footer"></div>
</div>

</body>
</html>