Question

I’m working on my website and I’m testing it out in all browsers and I love everything except the one thing IE 6 & 7 have been doing to my recent work gallery. I understand a lot of individuals don’t feel supporting IE 6 is worth it however it’s doing the exact same thing in IE 7 too. So I have to see whats going on.

My recent work gallery is supposed to have 2 rows and 3 columns, however in IE 6 & 7 it has 3 rows and 2 columns and I’ve tried some changes but it still looks the same.

This is how it looks in IE 6 & 7

This is how it looks in IE 8

CSS

![#RECENTWORK-WRAPPER {
    width: 100%;
    background: url(../images/irongrip.png) repeat;
    color: #fff;
    clear: both;
}

.RECENTWORK-CONTAINER {
    width: 95%;
    max-width: 1040px;
    margin: 0 auto;
    overflow: hidden;
    /*border: 1px solid #000;*/
}

.galleryItem {
    color: #797478;
    font: 10px/1.5 Verdana, Helvetica, sans-serif;
    float: left;
}

.galleryItem h3 {
    text-transform: uppercase;
}

.galleryItem img {
    max-width: 100%;
    padding: 3px;
    border: 1px solid #fff;
}

.galleryItem {
    color: #797478;
    font: 10px/1.5 Verdana, Helvetica, sans-serif;
    float: left;    

    width: 29.33333%;
    margin:  2% 2% 30px 2%; 
}]

HTML

    <div id="RECENTWORK-WRAPPER">
<div class="RECENTWORK-CONTAINER">
<h3><span>Recent Work</span></h3>
    <div class="galleryItem">
        <a href="#"><img src="images/recentwork-imageWH.jpg" alt="HOME GALLERY" /></a>
    </div>

    <div class="galleryItem">
        <a href="#"><img src="images/recentwork-imageWH.jpg" alt="HOME GALLERY" /></a>
    </div>

    <div class="galleryItem">
        <a href="#"><img src="images/recentwork-imageWH.jpg" alt="HOME GALLERY" /></a>
    </div>

    <div class="galleryItem">
        <a href="#"><img src="images/recentwork-imageWH.jpg" alt="HOME GALLERY" /></a>
    </div>

    <div class="galleryItem">
        <a href="#"><img src="images/recentwork-imageWH.jpg" alt="HOME GALLERY" /></a>
    </div>

    <div class="galleryItem">
        <a href="#"><img src="images/recentwork-imageWH.jpg" alt="HOME GALLERY" /></a>
    </div>
</div>
</div>

Do you know what is going on?
Any help is appreciated!

Answer 1

I think this might be your problem

width: 29.33333%;

Try taking that down to like 25% and see what it does. Sometimes padding and borders are a few pixels bigger on some browsers than others. If that works, then slowly increment it upward until it works in IE7