IE 5.5 Menu alignment Problem!

[Dala2006]

Hi,

I'm currently experiencing problems with a horizontal menu item, IE 5.5 is ignoring firstly the right hand margin and secondly it doesn't align the menu properly, It looks as desired in FF & IE6 but it goes pear shaped in IE5.5.

The link is shown below:
Site (http://homepage.eircom.net/~lawlessdsl/index45.html)

CSS Code:


/*Default Font & Text Style*/
body {font:normal 12px verdana, Arial, Helvetica, sans-serif; color: #4d4769;} /* set font here for whole page, change in specific divs */

#main {margin:20px 65px}

/*Date Function*/
.date {font-size:10px; margin:0; padding:0;}

/*Position divs*/
div.centered {margin: 8px auto; border:1px solid #BDBBC8; width:800px; padding:8px 8px; text-align:left;}

.logo {margin:4px 0 10px 0;}

/* ---------- menu ---------- */
#menu {
position:relative;
width:804px; /* overall width of div */
height:28px;
margin:10px auto;
padding:0;
}

#menu li {
float:left;
list-style:none;
text-align:center;
padding:0;
}

#menu li.nav a {
display:block;
margin:3px 6px 1px 0; /* change the 6px value to increase gap, but change the overall width above as well */
padding:5px;
text-decoration:none;
font:bold 12px/14px verdana;
color:#fff;
}
#menu li.nav a {
width:118px;
height:28px;
background:url("../images/oz-button.jpg") 0 0 no-repeat;
}
#menu li.nav a:hover, #menu li.nav a:active, #menu li.nav a:focus {
background-position:-128px 0;
}

/* clears the floated div above it */
.clear {
height:0;
line-height:0px;
font-size:0;
clear:both;
}

.lefted {margin:0 auto; width:800px;}


Does anyone know a way to fix this issue with IE5.5?

Thanks in advance

D

[PNK|design]

This is known as Box Model error on IE 5.x

You can find the solution to this at http://css-discuss.incutio.com/?page=BoxModelHack

Hope it helps you !