Grow your CSS skills. Land your dream job.

Space between divs in IE

  • # October 15, 2008 at 1:02 pm

    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:

    Code:

    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!

    # October 15, 2008 at 2:14 pm

    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:

    Code:
    # October 15, 2008 at 2:24 pm

    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.

    # October 16, 2008 at 2:14 pm

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

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".