PDA

View Full Version : IE renders a nasty space



suvantoj
Aug 15th, 2007, 03:39 PM
I've done this simple site, and as I'm still quite new to <div>s, the site has a small problem, but only on Internet Explorer.

Every other browser I've tested the site on, renders the site as intended, but IE renders a small space between two <div>s. I can't seem to found the problem, so I'd really appreciate your help.

The site in question is http://www.hantala.fi/sivu/div, and the CSS file is http://www.hantala.fi/sivu/div/tyyli.css

SouthwaterDave
Aug 15th, 2007, 04:00 PM
Your first <div> is coded:
<div id="logonavi">
<img src="logo.jpg" alt="logo" border="0" usemap="#navi" />
</div>
Move the </div> to immediately follow the <img> tag on the same line:
<div id="logonavi">
<img src="logo.jpg" alt="logo" border="0" usemap="#navi" /></div>

suvantoj
Aug 15th, 2007, 04:06 PM
Well that was easy, thanks :)

ahallicks
Aug 15th, 2007, 06:05 PM
For a quick description of why... IE will automatically add a space after an image if you leave a gap via a space, or a new line. One way to fix this is as above... or if you still want your code to be nicely indented you could use:



<div id="logonavi">
<img src="logo.jpg" alt="logo" border="0" usemap="#navi" /><!--
--></div>


which will comment out all the space in between and making the browser believe that the image is sat right next to the closing div. Hope that explains things okay

sybil6
Aug 16th, 2007, 07:21 PM
I had the same problem and now it is fixed, thank you, I still cant understand why it work that way; commenting it ; fixes it. anyway does this have a rational explanation or is it just what we call a hack?

garydarling
Aug 17th, 2007, 07:54 AM
That one has bugged me for two years! I just fixed my site based on this little tidbit; I had a 2 or 3 pixel white gap between my header image and the colored border below it, but only in IE. Thought it was 'part of the show'. Thanks ahallicks!

_Aerospace_Eng_
Aug 17th, 2007, 07:56 AM
Or to avoid the added mark up you can also make the image display:block;. In this case

#logonavi img {
display:block;
}
would fix the issue as well.