Unwanted padding on link images in IE only

Question

Hi,

I hope someone can help. Within my container DIV I have 3 images which I require to sit side by side in one row. This is indeed the case in every other browser except, annoyingly, as usual, in IE6, IE7 and IE8 (groan).

Each of the images is wrapped in an tag as follows:-

<div id="images">

<a href="images/image01.jpg" rel="milkbox[group]" title="my image details01"><img src="images/image01b.jpg" width="98" height="92" alt="my image details01" class="img01"></a>

<a href="images/image02.jpg" rel="milkbox[group]" title="my image details02"><img src="images/image02b.jpg" width="98" height="92" alt="my image details02" class="img02"></a>

<a href="images/image03.jpg" rel="milkbox[group]" title="my image details03"><img src="images/image03b.jpg" width="99" height="92" alt="my image details03" class="img03"></a>

</div><!--end of images-->

My CSS is as follows:-

    /* Global reset */
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, font, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td {
     margin: 0;
     padding: 0;
     border: 0;
     outline: 0;
     font-weight: inherit;
     font-style: inherit;
     font-size: 100%;
     font-family: inherit;
     vertical-align: baseline;
    }
    a img, :link img, :visited img {
     border: 0;
     display:block;
     }

    img{
    display:block;
    }
    /* End Global reset */

#images{
width:295px;
clear:both;
border:none;
margin-top:30px;
}

#images a:link{
text-decoration:none;
border:none;

}
#images a:visited{
text-decoration:none;
border:none;    
}
#images a:hover{
text-decoration:none;
border:none;

}

img.img01,img.img02 {
width:98px;
float:left;

}

img.img03{
width:99px;
float:right;

}

No matter what I do I can't seem to correct the display in IE. IE is adding additional padding to the left and right of each image, and the result is that 2 images only display within the row and the the 3rd image appears below it (floated right).

I have tried removing all white space (a suggestion i came across elsewhere) but that hasn't helped. I've also played around with negative margins but I'd prefer not to go down that route without understanding what's actually occurring.

Can anyone please shed some light on what's actually going on here and how I can resolve ? - it's drving me nuts !

Many thanks in advance.

Answer 1

You have to look at how IE calculates width. The 3 images have a total width of 295 and your div has a total width of 295. That 295 width of the div is measured from the outside of the div and unfortunately the content area of the div is less than 295. As an experiment increase the width of the div and see if the images display properly.

This is one page that describes it. Just search for IE Box Model in google.

Answer 2

Thanks for your reply and the information.

I've tried reducing the image widths to 98 pixels each. This is a total width of 294px, less than the 295px width of the containing DIV, but there was not change whatsoever.

Then on top of this change I also expanded the width of the containing DIV to 310px and the result again remains unchanged. 2 images only side by side and the 3rd image below and aligned right.

I'm totally perplexed.

Answer 3

There is a whitespace issue with IE...try removing the spacing between your tags and put them on a single line.

<div id="images"><a href="images/image01.jpg" rel="milkbox[group]" title="my image details01"><img src="images/image01b.jpg" width="98" height="92" alt="my image details01" class="img01"></a><a href="images/image02.jpg" rel="milkbox[group]" title="my image details02"><img src="images/image02b.jpg" width="98" height="92" alt="my image details02" class="img02"></a><a href="images/image03.jpg" rel="milkbox[group]" title="my image details03"><img src="images/image03b.jpg" width="99" height="92" alt="my image details03" class="img03"></a></div>