Forum Moderators: not2easy
Float hell, or... collapsed margins or...? Can't see straight any more. Deadliiiiine, for a site I just inherited...
I have validated, studied hard over MANY of the greatest new CSS books, and busted tail on this thing all weekend, to get a good, sound cross-platform CSS standard banner template from which to grind out a bunch of prototype html for waiting developers.
The painful irony... without my trying for this, is...
IE 7: (IE x.x being my client's main standard, eehhhhh... for their own VERY broad client base (support/customer service)
Not that I trust it from what I know, but... The page looks almost perfect in IE7, apart from the dropped/hidden 3-item Login menu, top right. A float issue, I assume...? You can see this little login menu on it's own next line down, with a click-dragged cursor over it, if you try, if you care... I have to.) (Note: Login menu is now a <p>, not a <ul> so as not to fight with the other two main menu lists and all their list properties, to simplify.)
But the BIG SUCK...
Firefox 2.: (my baby and golden standard) The whole darn banner collapses UP, all to heck. Grrrrr!
Any and all help much appreciated... Hopefully much of it is a related issue.
Thank you!
[edited by: SuzyUK at 9:29 pm (utc) on Feb. 20, 2007]
Without seeing the code I can only guess that it’s the usual problem where you have only floated children in a container so it effectively has zero in-flow content and collapses. If you set overflow:hidden on the container does this fix the problem? If so, then this is a fix because elements with overflow other that normal automatically contain their floated children. IE will be working because of a concept called hasLayout, but that’s a whole ’nother kettle of fish.
To wit:
<div id="container" style="border: 1px solid black">
<div style="float:left;width:20px;height:20px;background-color:red"></div>
<div style="float:right;width:20px;height:20px;background-color:green"></div>
</div><div id="container" style="margin-top:8px;border: 1px solid black">
<div style="float:left;width:20px;height:20px;background-color:red"></div>
<div style="float:right;width:20px;height:20px;background-color:green"></div>
<div style="clear:both"></div>
</div>Will give you two effects: The top <div> will be completely collapsed, and the bottom <div> will contain the two "floaters."
I like using a "clear" <div> because it isn't much code, and gives the CSS another "hook" to play with the presentation.
And these .clear divs have been very helpful to me, too.
I've still got a lingering float issue with a dropping login menu in IE7, but I'm closer... and it's SOOOOO much better in Firefox, now. Completely!
If I can form another coherent question without example link, I'll post again...
Thank you all!
