No replies to this topic

[d2Squared]

My problem.:

I made a little slideshow, uses overflow:hidden for the pictures, and differnet divs so it will target to it, let the code explain:

CSS:

#slide {
width: 400px;
height: 600px;
background:#4f4f4f;
}

#slide a:hover {
border: none;
}

#number {
height: 30px;
background: #424242;
list-style: none;
padding: 0;
margin: 0;
}

#number li  {
float:right;
font: 11px Arial, Helvetica, sans-serif;
text-decoration:none; 
color: #424242;
background: #3e3e3e;
text-align:center; 
width:32px; 
height:30px; 
line-height:30px; 
margin: 0 0 0 1px;
}

#number li a {
font: 11px Arial, Helvetica, sans-serif;
float:left; 
text-decoration:none; 
color: #00d8ff;
background: #3e3e3e;
text-align:center; 
width:30px; 
height:30px; 
line-height:30px; 
}

#number li a:hover {
color:#ffffff;
background: #373737;
}

#number li a:active {
color:#ffffff;
background: #323232;
}


.slideshow-image {
margin: 5px;
height: 560px;
overflow: hidden;
width: 390px;
background:#ABABAB;
}

HTML

<div id="slide">
<div id="number">
<ul id="number">

<li><a href="#1">01</a></li>
<li><a href="#2">02</a></li>
<li><a href="#3">03</a></li>
<li><a href="#4">04</a></li>
<li>05</li>
<li>06</li>
<li>07</li>
<li>08</li>
<li>09</li>
<li>10</li>
<li>11</li>
<li>12</li>


</ul>
</div>

<div class="slideshow-image">
<div id="1"><img src="images/img1.gif" alt="image" width="390" height="360" /></div>
<div id="2"><img src="images/img2.gif" alt="image" width="390" height="360" /></div>
<div id="3"><img src="images/img3.gif" alt="image" width="390" height="360" /></div>
<div id="4"><img src="images/img4.gif" alt="image" width="390" height="360" /></div>
<div id="5"></div>
<div id="6"></div>
<div id="7"></div>
<div id="8"></div>
<div id="9"></div>
<div id="10"></div>

</div>


</div>

Feel free to try it, but please do not still.
In explorer it works, so does it in FF, but in Opera it doesn't show. What's the matter with Opera? and overflow:hiden?