Help
Posted 13 November 2007 - 04:32 PM
Ao passar o mouse sobre tais botões, a imagem do banner muda.
Eu cheguei a programar isso com css e no Firefox funcionou certinho.
O problema é que no IE as imagens do banner não estão mudando.
Alguém sabe de algum hack ou comentário condicional pra resolver esse problema ?
já tentei de tudo e não consigo fazer funcionar no IE
O link da página de testes que fiz é:
www.flexport.com.br/teste/banner
CÓDIGO
<html>
<head>
<title>Teste do banner</title>
<style type="text/css">
body {
text-align:center;
padding:0;
margin:0;
}
.topo {
width:641px;
margin:0 auto;
text-align:left;
}
.banner {
background: #fff url('images/fixa.gif') no-repeat center;
width: 641px;
height: 187px;
position: relative;
top: 0px;
float: right;
border: 0px none;
}
ul.fotos {
position: relative;
list-style: none;
width: 641px;
padding: 0;
margin: 0;
}
.fotos:after {
display: block;
content: ".";
height: 0;
font-size: 0;
visibility: hidden;
clear: both;
}
ul.fotos li {
height: 84px;
float: left;
border: 0px none;
margin: 0px
}
ul.fotos li img {
border: 0px none;
}
ul.fotos li span img {
border: none;
width: 641px;
height: 187px;
}
ul.fotos a {
display: block;
}
ul.fotos a span {
display: none;
}
ul.fotos a:hover span {
display: block;
position: absolute;
top: 0px;
left: 0px;
border: 0px none;
}
</style>
</head>
<body>
<div class="topo">
<div class="banner"></div>
<ul class="fotos">
<li><a href="#"><img src="images/01small.gif" alt="" /><span><img src="images/01.gif" alt="" /></span></a></li>
<li><a href="#"><img src="images/02small.gif" alt="" /><span><img src="images/02.gif" alt="" /></span></a></li>
<li><a href="#"><img src="images/03small.gif" alt="" /><span><img src="images/03.gif" alt="" /></span></a></li>
</ul>
</div>
</div>
</body>
</html>
<head>
<title>Teste do banner</title>
<style type="text/css">
body {
text-align:center;
padding:0;
margin:0;
}
.topo {
width:641px;
margin:0 auto;
text-align:left;
}
.banner {
background: #fff url('images/fixa.gif') no-repeat center;
width: 641px;
height: 187px;
position: relative;
top: 0px;
float: right;
border: 0px none;
}
ul.fotos {
position: relative;
list-style: none;
width: 641px;
padding: 0;
margin: 0;
}
.fotos:after {
display: block;
content: ".";
height: 0;
font-size: 0;
visibility: hidden;
clear: both;
}
ul.fotos li {
height: 84px;
float: left;
border: 0px none;
margin: 0px
}
ul.fotos li img {
border: 0px none;
}
ul.fotos li span img {
border: none;
width: 641px;
height: 187px;
}
ul.fotos a {
display: block;
}
ul.fotos a span {
display: none;
}
ul.fotos a:hover span {
display: block;
position: absolute;
top: 0px;
left: 0px;
border: 0px none;
}
</style>
</head>
<body>
<div class="topo">
<div class="banner"></div>
<ul class="fotos">
<li><a href="#"><img src="images/01small.gif" alt="" /><span><img src="images/01.gif" alt="" /></span></a></li>
<li><a href="#"><img src="images/02small.gif" alt="" /><span><img src="images/02.gif" alt="" /></span></a></li>
<li><a href="#"><img src="images/03small.gif" alt="" /><span><img src="images/03.gif" alt="" /></span></a></li>
</ul>
</div>
</div>
</body>
</html>
