Why does IE6 adds extra margins??

[zenthoef]

So I cannot figure out why IE6 adds an extra margin to part of my code. I have applied the "display:inline" fix to many section sof my code that had the double margin problem, but that will not fix this problem. I am trying to display 18 image links. Each image is the same size and it is contained in a floating box of a fixed size. The fixed size makes it so that in IE7 and FF 3 rows of 6 image links are displayed. IE6 is adding a margin to the sides and bottom of the image links so that only 5 image links are displayed in a row, and then the box overflows. Sorry about the inline styles, I've been using them to try and debug this...

If anyone has any suggestions, I'd love to hear them! Thanks in advance.

Here's the snippet of HTML code I am referring to (following this will be the relevant sections of css code):


<div class="floatArea1" style="margin-top: 5px; margin-left:18px; padding-bottom: 5px; height:288px; width:555px; display:inline;">
<div class="genericBorder" style="background-color:#000;">
<div class="header" style="font-size: 18pt; margin-bottom:2px; margin-top:2px;">More Links to Follow...</div>

<div class="moreLinks">
<div class="img_link">
<a href="link1.html"><img src="link1.jpg" alt="Link1"/></a>
</div>
</div>

<!-- And so on to link 18....-->

<div class="moreLinks">
<div class="img_link">
<a href="link18.html"><img src="link18.jpg" alt="Link18"/></a>
</div>
</div>

<div style="clear:both"></div>

</div>
</div>


Here is the CSS code I am using:


/*floatArea1 and genericBorder used to make a box around links*/
.floatArea1{
float:left;
margin-left: 10px;
font-weight: normal;
width: auto;
padding:0px;
}

.genericBorder{
background-color:#1D1D1D;
border: 1px solid #FFF;
padding:5px;
width: auto;
}

.header {
margin: 0px;
margin-bottom: 0px;
font-weight: bold;
color: #ffff66;
font-size: 14pt;
line-height:30px;
text-align:center;
}

/*next two used to control appearance of image link*/
.img_link{
float: left;
display: inline;
}


.img_link img{
margin: 0px;
padding: 0px;
border: 1px solid #01b0f0;
width: 80px;
height: 72px;
display: inline;
}

/*Used to control spacing between link*/
.moreLinks {
margin: 5px;
width: 80px;
height: 72px;
float: left;
display: inline;
}

[criterion9]

Did you set your margin and padding to 0px for the body tag? This usually fixes most spacing problems between browsers.


body{
margin:0px;
padding:0px;
}

[zenthoef]

I tried adding this, but it did not help... Thanks for the suggestion though!