DIV Problem in IE

[elmstreeet]

I try to build a simple header. It should be similiar to the header of youtube.com.

1) top right: text like "user" "help" etc.
2) middle left: logo
3) middle center: menu
4) bottom: horizontal line

PROBLEM: FF displays it correctly, but IE does not. The logo (#menuleft) is always on top of the text (div#menutop).

###### CSS ######

div#nav {
width: 800px;
margin-top: 15px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: auto;
margin-right:auto;
}

div#menutop {
width: 100%;
height:25px;
background-color:#FFFFFF;
padding: 0px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
vertical-align: top;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #666666;
text-align: right;
padding-right: 25px;
}

#menuleft {
height:51px;
background-image:url(../img/logo.png);
background-repeat:no-repeat;
text-align:left;
margin:0;
width:150px;
float:left;
}

div#menumiddle {
width: 400px;
height:25px;
text-align: center;
padding:0;
margin-top: 0px;
margin-right: auto;
margin-bottom: 5px;
margin-left: auto;
}

#menubottom {
width: 800px;
height:0px;
margin-right: auto;
margin-left: auto;
border-top: 1px solid #FFF;
border-bottom: 1px solid #003366;
text-align: center;
vertical-align: top;
}

###### HTML ######

<div id="nav">
<div id="menuleft"></div>
<div id="menutop">TEXT</div>
<div id="menumiddle">MENU</div>
<div id="menubottom"></div>
</div>

So, what have I done wrong? I mean, if you have a another better solution than this, pl let me know. thx!

[Xapti]

Youtube's design has the logo span vertically across both the tabs and the top text... is that what you want?

Well instead of writing the individual margins for each element, you can use shorthand... margin:0 auto. I noticed for the first element you specified margin-right:0 then margin-right:auto right after.

For the bottom border, you can do it with a HR or even applying a border-bottom to "nav"... you dont' need the menubottom as far as I know.

These don't answer your problem though. The problem is div#menutop. You shouldn't assign it width 100%, because IE won't think there's space for it then. Removing that statement (which was unnecessary anyways, Which is why I dont' like adding stuff unless I have to!) solves the problem.

[elmstreeet]

@Xapti

thank you, this solved the problem.

Anyhow, there is another problem. The menumiddle is NOT centered horizontally in the IE. It has been shifted 150px to the right, caused by the width of #menuleft. FF displays it correctly.

What to do? Thank you a lot!

[Xapti]

Youtube's positioning (widths) is all static/non-fluid, which doesn't really account for varying font sizes, but it does in the sense that it will accommodate any realistic font size set, by making the tabs which contain the text much larger than the text that it contains.
That way you can make your menu a fixed width, and give it fixed padding/margin to center it. I like fluid designs, but if you like fixed withs, this will work fine for you.

[elmstreeet]

@xapti

I tried out your suggestion, but it doesn't work in IE.

FF: centralized (horizontally). OK!
IE: still shifted 150px to the right

here's the code once again:

div#menutop {
height:25px;
background-color:#FFFFFF;
padding: 0px;
margin:0 auto;
vertical-align: top;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #666666;
text-align: right;
}

div#menuleft {
height:51px;
background-image:url(../img/test.png);
background-repeat:no-repeat;
background-position:top;
float: left;
display: block;
margin:0;
width:150px;
}

div#menumiddle {
width: 400px;
height:25px;
text-align: center;
margin-left:200px;
margin-right:200px;
margin-top:0;
margin-bottom:0;
display:block;
padding:0;
}

#menubottom {
width: 800px;
height:0px;
margin-right: auto;
margin-left: auto;
border-top: 1px solid #FFF;
border-bottom: 1px solid #003366;
text-align: center;
vertical-align: top;
}

would be great, if you or someone else could help me. thx a lot!

[elmstreeet]

I GOT IT! YES!

The problem was the "display: block;" in the DIV (see below). Delete this out of the DIV, and it works in both, FF & IE.

div#menuleft {
height:51px;
background-image:url(../img/studdex_logo_uni.png);
background-repeat:no-repeat;
background-position:top;
float: left;
display: block; <<< DELETE THIS!
margin:0;
width:150px;
}

Thank you Microsoft, for this waste of time!

Thank you CSS guys for your help anyway :-)