IE5 Problem with divs

pgtips · February 5th, 2005, 11:37 AM

I've got this problem with IE5, I'm trying to do a simple layout like this using divs:

Code:

|---------------|
|page           |
| |-------------|
| | banner      |
| | |-----------|
| | | menu      |
| | |-----------|
| |-------------|
| |             |
| | content     |
| |             |
| |-------------|
| | footer      |
|---------------|

The problem is that in IE5 I've got gaps between the banner, content and footer divs. Take a look at the attached example HTML and you'll see what I mean - I don't want the blue bits between the banner and content, nor between the content and footer!

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html lang="en" dir="ltr">
<head>
    <title>template test</title>
    <style type="text/css">
        #page
        {
            border-width: 1px;
            border-style: solid;
            border-color: #666666;
            background-color: blue;
        }
        #banner
        {
            border-width: 1px;
            border-style: solid;
            border-color: #666666;
            background-color: red;
        }
        #menu
        {
            border-width: 1px;
            border-style: solid;
            border-color: #666666;
            background-color: green;
        }
        #content
        {
            border-width: 1px;
            border-style: solid;
            border-color: #666666;
            background-color: yellow;
        }
        #footer
        {
            border-width: 1px;
            border-style: solid;
            border-color: #666666;
            background-color: purple;
        }
    </style>
</head>

<body>
    <div id="page">Page start
        <div id="banner">Banner start

            <h1>banner text</h1>

            <div id="menu">
          menu text
            </div>
         Banner end</div>

        <div id="content">
            <h2>Page Title</h2>
            <p>page content</p>

        </div>
        <div id="footer">
            &copy; footer
        </div>

  Page end</div>
</body>
</html>

It looks fine in IE6 and Firefox, the only blue is at the top and bottom, which is just what I want.

Anyone know why this is - feel free to rant about how buggy IE5 is, as long as you give me the answer too ;)

thanks
Phil

Imar · February 5th, 2005, 12:32 PM

Hi Phil,

The only reason I can think of is the layout of the HTML. Did you try removing all the white space from the code?

I don't have IE 5.x here right now, so I can't test. At first I thought this was due to IE's buggy box model implementation, but you're not using any fixed width with padding/margin anywhere, so I think it has to be the code formatting....

If that doesn't help, let me know and I'll try to get what you see in IE 5.x.

Imar
---------------------------------------
Imar Spaanjaars
Everyone is unique, except for me.

pgtips · February 5th, 2005, 03:56 PM

Hi Imar, removing the whitespace didn't work.

Phil

meow · February 5th, 2005, 04:02 PM

Are you referring to IE5 Mac? Cause I don't see the problem on Windows.

(o<
//\ =^..^=

pgtips · February 6th, 2005, 05:36 AM

No I mean IE5 Win. I've got v5.00.2614.3500IC

meow · February 6th, 2005, 06:14 AM

That's interesting. 5.00.2614.3500 would be IE5 (note NOT 5.01) on Win98 SE. Does that sound right to you? And what does IC stand for? Is this a modified version?

I've got 5.01 on NT. The standalone version but it has been accurate so far. If the above is right, I doubt that there are many 5 left. Most people would have upgraded to 5.01, I think. On the other hand I don't know if there were any rendering differences between the two. What a mess!

(o<
//\ =^..^=

Imar · February 6th, 2005, 06:39 AM

Hi Phil,

I think this is caused by the default padding and margin that is added to elements like p and h2 in earlier browsers. (These elements still have padding and margin but they seem to interfere less with backgrounds etc).

I ran a quick test on a virtual machine with Win98 and IE4 and I was able to fix the problem by adding the following selector:

p, h2
{
margin: 0;
padding: 0;
}

This removes the standard padding and margin from the p and h2, causing the blue areas to disappear.

HtH,

Imar
---------------------------------------
Imar Spaanjaars
Everyone is unique, except for me.

pgtips · February 6th, 2005, 02:14 PM

Thanks Imar, you're a star, it is the margin on the emedded block elements that's causing the probs.

and thanks to meow too - it is IE5 on Win98 SE, and I have no idea what the IC stands for!