IE6 and IE5 positioning trouble

[bydesign]

Here's the thing I'm working on.
www.ashby-design.co.uk/mslexia/index.html
(http://www.ashby-design.co.uk/mslexia/index.html)

I've fixed a bug that caused my absolutely positioned boxes (with the red and green borders) to disappear when next to a floated box. I applied a -3px negative margin to the float (yellow border) and hey presto.

Can anyone tell me what this bug fix is down to - I'm cautious about applying fixes I don't understand especially as the positioning of the boxes in IE6 and IE5 is not the same as that in standards compliant browsers.

What's happening is that my h1#branding box (grey border) is not positioned right at the top of the header box (blue border), as it should be. Is that a 3px space I'm seeing?

Any illumination on this will be very helpful - it's got a bit twisted beyond my understanding,

Thanks x


To recap, here are the borders I've coloured my boxes with:
1) div#header - blue border
2) h1#branding - grey border
3) div#textsize - red border [ABSOLUTE]
4) ul#adminnav - green border [ABSOLUTE]
5) ul#mainnav - yellow border [FLOAT]

Here's the relevant CSS:

/* 2 =HEADER

----------------------------------------------- */

div#header {
position: relative;
width: 100%;
height: 276px;
background-repeat: no-repeat;
background-position: 0px 100%;
margin: 18px 0 5em 0;
border: 1px solid blue;
}



/* =Branding
-----------------------------------------------------------------------------*/

h1#branding { /* banner image in this in color css */
position:relative;
width: 480px;
height: 85px;
border: 1px solid grey;
}

h1#branding span {
position: absolute;
width: 100%;
height: 100%;
background-image: url(../images/architecture/branding.gif);
background-repeat: no-repeat;
}

div#header h3 { text-indent: -5000px; margin: 0; padding: 0; line-height: 0}


/* =Textsize div
-----------------------------------------------------------------------------*/


div#textsize {
position: absolute;
height: 30px;
top: 5px;
right: 0px;
border: 1px solid red;
}

div#textsize p {padding: 0; font-size: 1.1em}
div#textsize a {border: none; padding: 0.3em}
div#textsize .letter {font: 1.8em Georgia, "Times New Roman", serif;}


/* =Admin Nav
-----------------------------------------------------------------------------*/

ul#adminnav {
position: absolute;
height: 30px;
top: 55px;
right: 0px;
border: 1px solid green;
}

ul#adminnav li {
float: left;
background-color:#fff;
}

ul#adminnav a {
display: block;
padding: 0 0.5em 0 0.5em;
font-size: 1.3em;
color: #000;
background-image: url(../images/architecture/divider_admin.gif);
background-repeat: no-repeat;
background-position: right 50%
}

ul#adminnav .last a {background-image: none}


/* =Main Nav
-----------------------------------------------------------------------------*/
/* mainnav list */
ul#mainnav {
width: 100%;
float: left;
background-color:#000;
padding: 0;
margin-right: -3px; /* IE6 fix that makes absolute positioned boxes appear */
height: 4.3em;
line-height: 4.3em;
border: 1px solid yellow;
}


/* mainnav list items */
ul#mainnav li {
position: relative;
float: left;
z-index: 10;
background-color: #000;
}

ul#mainnav li#submit {width: 9em;}
ul#mainnav li#subscribe {width: 11em;}
ul#mainnav li#shop {width: 7em;}
ul#mainnav li#magazine {width: 11em;}
ul#mainnav li#nutsbolts {width: 14em;}
ul#mainnav li#latestnews {width: 14em;}
ul#mainnav li#blog {width: 7em;}

ul#mainnav li a {padding-left: 1em}

ul#mainnav a {
display: block;
font-size: 1.3em;
text-transform: uppercase;
letter-spacing: 1px;
background: url(../images/architecture/divider.gif) no-repeat right 50%;
}

/* mainnav second-level lists */
ul#mainnav li ul {
display: none;
position: absolute;
left: 0;
top: 1em;
padding-top: 10px;
padding-bottom: 10px;
border-bottom-style: solid;
border-bottom-width: 5px;
background-image: url(../images/architecture/mainnav_bg.png);
}

ul#mainnav li > ul { /* to override top and left in browsers other than IE, which will position to the top right of the containing li, rather than bottom left */
top: auto;
left: auto;
}

ul#mainnav li:hover ul, ul#mainnav li.over ul { display: block; }

ul#mainnav li ul li {background-color: transparent; }

ul#mainnav li ul#mag {width: 11em}
ul#mainnav li ul#nuts {width: 14em}
ul#mainnav li ul#news {width: 14em}

ul#mainnav li ul a {
line-height: 2em;
margin-top: 0;
text-transform: none;
letter-spacing: normal;
background: none;
padding: 0 1em}


ul#mainnav .last a {background: none}
ul#mainnav li.first {margin-left: 15px}

[bydesign]

I've decided to go another way: add an extra div to contain my h1 and position the (new) branding div absolutely as well - so everything is perfectly positioned.

[bydesign]

But… the issue is still there in that I've fixed the disappearance of the absolutely positioned boxes in IE6 + IE5 using a fix I don't understand.

Compare:
www.ashby-design.co.uk/mslexia/index.html (http://www.ashby-design.co.uk/mslexia/index.html)

That has this setting on the floated ul#mainnav:
ul#mainnav {margin-right: -3px; /* IE6 fix so that absolute positioned boxes don't disappear */}

With www.ashby-design.co.uk/mslexia/index2.html (http://www.ashby-design.co.uk/mslexia/index2.html)
That has this setting on the floated ul#mainnav:
ul#mainnav {margin-right: 0;}