Member Avatar for 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;
}
  • 3 Contributors
  • 4 Replies
  • 130 Views
  • 4 Days Discussion Span
  • Latest Post Latest Post by jephthah

Dani AI

Generated

The visible gap is not magic from one browser — it's the inline formatting model and browser defaults. Inline-level elements (anchors, images) render any literal space/newline between them as a glyph-width gap; different UA styles, default font metrics and alignment rules make that gap look different in IE vs Firefox. is right that a reset helps; ’s box-model point applies only when the page is in quirks mode.

Practical, robust fixes (pick one):

/* float each link/image so they sit flush */
#main_imagemap a { float: left; display: block; }
#main_imagemap img { display: block; margin: 0; }

/* or: keep inline layout but kill inter-element white space */
#main_imagemap { font-size: 0; }
#main_imagemap a { display: inline-block; font-size: 14px; }  /* restore text-size if needed */
#main_imagemap img { display: block; }

Float/block is simplest for a tiled layout. The font-size:0 trick removes the gap produced by HTML whitespace while letting you keep inline-blocks. Both avoid brittle browser-specific hacks and work consistently.

Checklist and cautions:

  • Ensure a standards DOCTYPE (for example <!DOCTYPE html>) so IE uses the standard box model; otherwise borders/padding can be counted differently. See MDN on box-sizing: box-sizing — MDN.
  • Remove deprecated align attributes and replace with CSS floats/blocks.
  • Use devtools to inspect computed margins, line-height and whitespace characters.
  • If you want a normalized baseline across browsers, consider a small reset/normalize (e.g., Normalize.css).

For background on the inline-gap behavior and other removal techniques see this practical writeup: Fighting the space between inline-block elements. These approaches are more future-proof than IE-only selector hacks.

Recommended Answers

All 4 Replies

Member Avatar for 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 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.

commented: good links, thanks +3
Member Avatar for 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

Member Avatar for 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.

Member Avatar for jephthah

Reason #143 Why We Hate Microsoft.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.