Forums

soap

This is a problem I run into frequently.
Unfortunately I don't have anything live that I can show you as an example, but it should be easy to understand.

I'm talking about when you have just a normal layout such as:

<div id=\"header\"></div>
<div id=\"content\"></div>
<div id=\"footer\"></div>

In IE, there will be spaces between those divs which are really obvious if those divs have background colors or images.
So... I have been having to use conditional stylesheets to go in and give whichever divs need it negative margins. I have always known that there must be some other way, or something I'm doing wrong, or something I'm not doing but never got around to resolving it. So here I am.

Anybody know what I'm talking about? Anybody know what to do about it?

Thanks!

chriscoyier

Older versions of IE put a line-break between DIV's like that, which is annoying and where that space comes from. One way to handle it is to make sure there is no space in your code after the closing div and before the opening div:

<div id=\"header\">
</div><div id=\"content\">

</div><div id=\"footer\">

</div>

mikes

Another technique is to detect the user agent and if the user is using an older version of IE (that exhibits this problem), send a large electrical current back to the user's machine. When that causes the smoke and stink to be let out of the user's computer, maybe they'll realize that it was a hint for them to upgrade their browser. :)

Sorry I couldn't resist :)

Seriously, thanks for the tip Chris. I didn't know about that.

soap

Yeah, this works but... It visually turns code into garbage. No other way beside conditional stylesheets and negative margins?

treehouse : what would you like to learn today?

Forums

Space between divs in IE