View Full Version : Header css works in ie, breaks in firefox

Sep 16th, 2010, 08:11 AM
I really found this by accident I never use firefox, or well rarley anyway but I did to load my site and its all broken.

The site should show like this




and it does in ie, but in firefox it looks more like


(logo) (menu)

My css code is as follows

#header {
background: #fff;
margin: 0;
padding: 0;

.logo {
background: #fff url(images/logo.png) no-repeat;
float: left;
width: 220px;
height: 60px;
margin: 20px 0 0 0;
padding: 0;

Now from my testing I gathered this gets fixed if I add a height property to the header section. But the problem is the height varies, I have php code that conditonally shows some content up by the ad in certain circumstances and the ad even isn't shown on everypage. So since my need for header size changes I figured don't specify it and let it take what it needs, but that seems to be what breaks it in firefox.

How do I deal with this to enure it will display correctly in firefox.

EDIT: ok seems it was a two part fix. One st max-height in the css, two don't use css to show the logo, use a normal img tag. Now it seems to be working fine.

Sep 17th, 2010, 02:08 AM
add clear: both; to the menu and that should fix it. What you see in firefox is the correct way it should look. IE just expands the header past the logo when it shouldn't. If you check google chrome or any other browser really you get the same thing as firefox. If you want the header to always be as tall as the logo then you can add a div tag like <div style="clear: both"></div> after the logo div so it will always wrap to the next line under the logo. That way if you have a background image in the header and the logo is dynamic it will always be as tall as the logo.

Major Payne
Sep 17th, 2010, 07:42 AM
Without seeing the full coding including the HTML, I'm just going to say I am not sure that you really need to float the logo at all. All browsers default positioning is to the left unless stated otherwise by CSS. Plus, floating an element removes it from the document flow which means you may need to clear your float(s) at some point which in this case is going to be required. Without the float left, the menu div would have positioned itself below the logo div.