David Bisset: Web Designer, Coder, Wordpress Guru
Web 2.0, Php, MySQL, HTML, CSS, Wordpress, Javascript, iTouch iPod, iPhone, Adobe…
Drop Down List Breaks Float Layout in Firefox
20 Dec
This is a personal note for me (and anyone else who stumbles on this) regarding a possible CSS bug for Firefox.
Say you have two divs - both have floats so that they can end up being two columns on your site. But sometimes when you add a dropdown menu (<select> tag) to one div) it will break the layout… usually meaning that the other div will be pushed down. And this usually happens only in Firefox. IE sees it just fine.
After some mindless tinkering try this - try switching the ORDER OF YOUR divs. So instead of having:
<div1>
<select><option value="something"></option></select>
</div1>
<div2>Right Column</div2>switch the order in the html, and adjust the css floats (from “left” to “right” for the div2 in this case):
<div2>Right Column</div2>
<div1> <select><option value="something"></option></select> </div1>This doesn’t really address the oringial problem, although it does fix the issue - and unless i’m missing something, this appears to be a bug in Firefox (although I have not tested this on a Mac version of Firefox).
Tags: CSS, Firefox, HTMLRelated posts
3 Responses for "Drop Down List Breaks Float Layout in Firefox"
Do you have a test case with the floats set up, perchance? I tried to follow your description of how the floats were configured, but I couldn’t reproduce the problem in Firefox 2 or 3b2 on Vista. I’ll try pasting the HTML I used below, but I’m not confident it’ll survive comment-munging!
Right Column
If you get a testcase, filing it in https://bugzilla.mozilla.org would be great, or just mail it to me if that doesn’t work for some reason.
I am having the same problem and have it every once in a while. I sent in the bug to the url you gave but also wanted to leave the example here. http://www.josephmanning.com/spidertel/encore/contact.asp
Thank you for this I took me several hours and messing around, very very frustrating.
I have a dynamic javascript menu that expands, but in FF it would push any divs under the menu div down when mousovered.
I tried every css trick in the book, tried direct html code or pure css but the divs always moved in FF.
The trick was to but the div above the menu.
OH and this worked fine in ie, I spent 4 hours fixing it for FF.
Leave a reply