Te explico, si visitas la pagina www.gartxi.co.cc entenderas lo que estoy haciendo, pero el problema es q IE no lo entiende, y para que lo entienda tengo que hacer todo con <a en vez de con <p (espero q se entienda)
el problema es que los links a los archivos me desbaratan toda la pagina porque se ve que heredan propiedades del a:hover.
En el codigo que cuelgo los links van con <p solo para que se vean bien, pero claro el link no funciona.
He intentado crear mas estilos para a pero siempre me hace la misma jugada.
Espero que se entienda, muchas gracias!!
CSS
ul.franjas {
width:900px;
height:1800px;
margin:0;
padding:0;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
}
ul.franjas li {
display:inline;
margin:0;
padding:0;
}
ul.franjas li a {
display:block;
height:1800px;
width:110px;
border-right:1px solid #f6f6f6;
text-align:justify;
float:left;
outline:none;
text-decoration:none;
}
ul.franjas li a b {
display:block;
font-size:17px;
text-transform:uppercase;
margin-bottom:10px;
}
ul.franjas li a span {
display:none;
padding:20px;
text-align:justify;
}
ul.franjas li a:hover {
width:350px;
font-size:1px; }
ul.franjas li a:hover span {
display:block;
}
a.s1 {background-color:#a0a0a0; color:white;}
a.s2 {background-color:#868645; color:white;}
a.s3 {background-color:#ddbd58; color:white;}
a.s4 {background-color:#dd904e; color:white;}
a.s5 {background-color:#dd6e45; color:white;}
HTML
<ul class="franjas">
<li>
<a href="#" class="s1">
<span>
<img src="imagen/Arbol2.jpg" width="110" height="110">
<b>gearte Produkzioak</b><h5>Goza ezazu geartek eskeintzen dizkizun aukera desberdinekin.</h5>
</span>gearte Produkzioak
</a>
</li>
<li>
<a href="#" class="s2">
<span><b>Komikiak</b>
<p href="komiks/Lorontzi.pdf"><div id="zona1"><img src="imagen/Lorontzi.jpg" height="180" width="110"></p> </div>
<p href="komiks/Arranopolar.pdf"><div id="zona1"><img src="imagen/Arrano.jpg" height="180" width="110" ></p></div>
<p href="komiks/Raul.pdf"><div id="zona1"><img src="imagen/Raul.jpg" height="180" width="110"></p></div>
<p href="komiks/Hegaldia.pdf"><div id="zona1"><img src="imagen/Hegaldia.jpg" height="180" width="110"></p></div>
<p href="komiks/Gajate.pdf"><div id="zona1"><img src="imagen/Gajate.jpg" height="180" width="110"></p></div>
<p href="komiks/Stwarts.pdf"><div id="zona1"><img src="imagen/Stwarts.jpg" height="180" width="110"></p></div>
</span>Komikiak
</a>
</li>
</ul>