Strange display bug in IE

[olivernn]

I’m really stumped at what IE is doing and cannot seem to fix the layout.

I have a menu, made up of an unordered list, within a floated div. In Safari and Firefox this works fine and looks how I would expect it. In IE I just cannot get the thing to work!

Below is the layout

Code:

Minimal
Pixel

• Welcome
• Blog
• Help
• Contact Us

stuff

Footer

And here is some of the relevant CSS

Code:

#container{
margin-right:22px;
margin-left:22px;
}

#header, #menu, #content, #sub_section, #footer{
overflow:hidden;
display:inline-block;
margin:5px;
}

#header, #menu, #footer{
width:958px;
}

#menu{
float:left;
width:720px;
margin-top:-21px;
}

#content{
float:left;
width:720px;
padding:10px 10px 10px 10px;
}

#sub_section{
padding-left:25px;
width:180px;
height:700px;
}

#footer{
clear:both;
font-size:0.7em;
text-indent:10px;
}

The page is viewable at http://minimalpixel.net, view it in IE to see the problems.

I have tried everything I can think of to try and solve this problem, trying to give everything relevant hasLayout etc, but to be honest I can’t even work out what the bug is, so trying to solve it is proving all the more hard!

Any help is much appreciated!

[olivernn]

Just noticed that I haven’t posted the css for the tabs….

Code:

#tabs{
list-style:none;
padding:8px;
padding-bottom:10px;
background:url(/images/tab_background.png);
clear:both;
}

#tabs li{
display:inline;
margin-right:20px;
padding:8px;
}

#tabs li.active{
border-bottom:1px solid #AAAAAA;
}

#tabs li.active a{
color:#FF2782;
font-size:1em;
font-weight:700;
}

#tabs li a{
color:#AAAAAA;
font-size:0.8em;
text-decoration:none;
margin-bottom:10px;
padding-top:20px;
}

#tabs li a:hover{
color:#2093A8;
}

#menu{
padding:0px;
}

[olivernn]

Sorry, I should have explained better.

If you see the navigation links at the top, "Welcome" "Blog" etc, they are not positioned correctly, the list holding this links is too far to the right and also to far to the top, so much so that it is obscuring part of the header.

Also there is a problem with the right hand column, which is also not displaying properly, I suspect this might be because the nav menu is shifted to the right as described above.

I have included an image of how it should look in safari, I hope this helps.

[olivernn]

Ok, I have made some progress….

The right hand column, where the sign up, demo and login sections are, should have started right at the top of the page, however because IE doesn’t display floats properly it wasn’t, there is more info here http://css-class.com/articles/explorer/ … rtest1.htm

Basically I made sure that all the floats were clearing each other, this seems to have solved this problem in IE. Now I still have to get to the bottom of the other display issue, the nav bar not displaying in the correct place, I have a feeling though that is might be something similar…..

[Author]

Posts