Image Gallery Overflow problem in IE6

The image gallery of pics I am working on spills out over it's respective div section in IE6 (and I am assuming IE7) but renders great in Firefox 2.0. I am very new to CSS and I tried doing some snooping around the net on the issue. I think it might have something to do with the way hasLayout is handled by IE.

Here is a chunk of my HTML...
<code>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<div class="upperleft">
<div class="gallery">
<br />
<div class="figure">
<div class="photo">
<a href="#" onclick="jkpopimage('images/DSC00118.jpg', 640 + 17, 480 + 100, 'Signature Handbag<br />$65.00'); return false">
<img src="images/thumbs/DSC00118.jpg" alt="Signature Handbag" /></a><br />
</div>
</div>

<div class="figure">
<div class="photo">
<a href="#" onclick="jkpopimage('images/DSC00137.jpg', 640 + 17, 480 + 100, 'Signature Handbag<br />$80.00'); return false">
<img src="images/thumbs/DSC00137.jpg" alt="Signature Handbag" /></a><br />
</div>
</div>

</div>
</code>

Here is my relevant CSS:
<code>
div.upperleft {
width: 800px;
height: 600px;
margin-left: auto;
margin-right: auto;
background-image: url(images/bestback.png);
background-repeat: no-repeat;
_background-attachment:fixed;
text-align:left;
}
.figure {
float: left;
margin-left: 2px;
}
.photo
{
}

.photo img
{
height: 75px;
width: 75px;
margin: 3px;
border : 2px solid #666;
background-color: #FFF;
position: relative;
top: -5px;
left:-5px;
}

/* IE 5/6 border erase bug */
* html #gallery
{
width: 100%;
}

/* IE 5 placement bug */
* html #gallery img {
width: 100%;
}
</code>

Remember, I am pretty new to CSS so try and dumb it down if you can. :) Please help! Thanks for looking....

Image Gallery Overflow problem in IE6

Cza102282

Drag_Racer

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week