nav tabs drop diagonally downwards in IE7

I can't get the icon tabs at the top of the site here to line up properly in IE6,7. They keep dropping diagonally downwards and not sure what i'm doing wrong?

 

As the #navtabs is not exactly 20px as defined, IE grows out if the element is bigger than specified width/height. And the top-margin used to push the icons down becomes the culprit.

So i guess making following changes will work good in IE, in Firefox it looks ok, but you have to save and see in IE.

#navarea { add position:relative; }

#navtabs { remove height; }

#icons { remove margin , add position:absolute; left:0; bottom:0; }

 

you were close. i couldn't remove the height from the #navtabs because that allows for the jquery bounce effect. so i left the #navtabs div alone

so i changed this;

/*#navarea {
	float: left;
	width: 580px;
	height:150px;
	overflow:hidden;
}
	
#icons{
	clear: both;
	width: 580px; height:40px;
	position:relative;
	display: block;
	float: left;
	margin: 90px 0 0 0;
}*/

Code (markup):

to this;

#navarea {
        float: left;
	width: 580px;
	height:150px;
	overflow:hidden;
        [B]position: relative;[/B]
}
	
#icons{
	width: 580px; height:40px;
	[B]position:absolute;
	display: inline;
        bottom: -5px;
        left: 0px;[/B]
}

Code (markup):