Solution For Mac IE5 CSS Problem?

Are there any CSS web designers out there who can offer a guy a bit of advice? This problem is bugging me:

My webpage in Firefox looks like this:

Firefox is correct

Which is correct. Unfortunately, IE5 for Mac looks like this:

Mac IE5 is not

This is not correct. I added the red, white and blue lines to differentiate the various divisions. White is “header”, red is “main-body”, and blue is “content”. The code right at that point looks like this:


</div> <!--End div "header"-->

<div id="main-body">

<div id="content">

For some reason, IE5 for Mac insists on putting a bit of space between the header and main-body divisions. It’s not the end of the world but it’s also not correct and I’d like to know why. I’m sure it has to do with yet another CSS bug in IE5Mac which has to be compensated for with a hack.

I would appreciate any help people can offer.


Nevermind. I fixed it. It turns out the <ul> directly above the end of the “header” division was the issue. I had defined it with an id of “text-size”. The problem was that in the CSS for “text-size” I set a top margin of 5 pixels. When I changed all margins to 0 pixels, the gap closed up:

#text-size {
    text-align: right;
    color: #ffffff;
    font: bold 10px Verdana, Arial, Helvetica, sans-serif;
    margin: 0px;
    padding-top: 0px;
    padding-right: 5px;
    padding-bottom: 0px;

The margins on the <ul> and <li> tags don’t seem to matter—at least in terms of the bug. It’s the margin on the id object itself which causes the problem.