IE-7 float bug with my site header, not sure why

HTML & CSS
1

I am working on another new site for a client and the header of my website looks like crap in IE7 and FireFox2…see attached file for example

http://dev.home-care-tech.com/

Any ideas on how I can correct the layout issue here?

Thanks.

2

Hi,

IE6/7 need floats to come first in the source order. You have your a#logo preceding it, you can just float it left if you like. Or bring your #SearchSocialContainer div before a#logo in the markup.


#SearchSocialContainer {
float:right;
width:635px;
}
[B]#logo[/B] {
[COLOR=Blue]float:left;[/COLOR]
}

That being the case with IE6/7 it is always best to make it a general rule to bring floats first in the source for all browsers.

I’m not sure if FF2 had the same problem but that may very well fix it too.

3

Yes FF2 had the same bug and would not displace the inline content on the same line as the float.

4

Thanks Paul, that is what I suspected.

I have K-Meleon installed for testing with the FF2 engine but I only fire it up when I’m editing code on local files.