someone please explain why IE adds whitespace between images, Firefox does not

[jephthah]

Disclaimer: I am not a webdesigner by any means, i only know enough to get my self into trouble.

Im trying to help a non-profit fix their webpage, and Im having a rotten time getting IE and Firefox to agree. the front page is a 3x3 grid of pictures that link to other pages. (some of the pictures are 2x wide).. it works just fine in FF -- all pictures are flush against each other. But IE keeps adding whitespace between the pictures within each row.

ive been hacking and poking at this a while, but nothing i do seems to make it better.

please help, thanks!

<!-- // FROM HTML FILE // -->

<div id="main_imagemap">
<div class="img">
<a href="involved.htm"><img src = "images/nw.jpg" align="left"></a>
<a href="video.htm"><img src = "images/nn.jpg"></a><br>
<a href="outlook.htm"><img src = "images/ww.jpg" align="left"></a>
<a href="about.htm"><img src = "images/ce.jpg"></a><br>
<a href="projects.htm"><img src = "images/sw.jpg" align="left"></a>
<a href="aboutus.htm"><img src = "images/ss.jpg" align="left"></a>
<a href="news.htm"><img src = "images/se.jpg"></a><br>
</div>
</div>


<!-- // FROM CSS FILE // -->

#main_imagemap 
{
   position:absolute;
   top:130pt;left:50pt;width:790;
   z-index:6;
}

div.img img
{
   display: inline;
   margin: 0px;
   padding: 0px;
   border: 2px solid #000000;
}
div.img a:hover img 
{
   border: 2px solid #F7EF6A;
}

[buddylee17]

The reason is that each browser applies its own default stylesheet to your page. What this means is that each browser adds a certain amount of margin, padding, line height... to each element. The problem with this is that IE may add 2px and FireFox may add a different amount. Thus the inconsistency problem that has plagued the world of web design. The only way to make things appear consistent is to reset the elements you will be using in the beginning of your stylesheet. I often post this link, as the question comes up quite often. Have a read, it should clear some things up. Here is a link dealing with white space that IE adds in between images.

[jephthah]

good articles, thanks. added to bookmarks

i actually found a workaround:

margin: 0px;
*margin: 0 0 0 -2;

'*' causes it to be ignored by FF, but still parsed by IE

not pretty, but hey, it works for now

[MidiMagic]

The real reason is that you can't have cross-browser compatibility if you place nonzero surrounding styles (margin,. border, padding) in the same tag that has size styles (width, height).

IE crams the surrounding styles INSIDE the size styles.

Other browsers put surrounding styles OUTSIDE the size styles, as the W3C standard states.

Positioning with respect to the browser window is not cross-browser compatible.

[jephthah]

Reason #143 Why We Hate Microsoft.