Drop Down menu breaks layout in Firefox

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

calebih@gmail.com - 24 Apr 2007 16:09 GMT

Here is the link in question:

http://www.redchip.com/testing.asp

It is simply styled with floating divs.

Two floating divs are in a container, and they look fine, until I
insert dropdown menu in the left div, then the right div gets pushed
down as if the left div is too big or has clear:right applied to it.

When I take out the dropdown menu, it behaves normally.

This only happens in firefox. I tested with Safari and IE7, and it
behaves fine.

I've tried many things, but I just can't get it to work in FF. help!

Reply to this Message

Ben C - 24 Apr 2007 19:48 GMT

> Here is the link in question:
>
[quoted text clipped - 7 lines]
>
> When I take out the dropdown menu, it behaves normally.

Yes, you mean the <select> element. If you remove all the <option>s from
the <select> element it also works.

> This only happens in firefox. I tested with Safari and IE7, and it
> behaves fine.

It works properly in Opera too.

> I've tried many things, but I just can't get it to work in FF. help!

It looks like a bug in Firefox. There is no other rational explanation
for this behaviour.

One workaround that seems to work is move rightArea in the source so
it's before mainArea and make it float: right instead of float: left.
You can then even get rid of float: left on mainArea altogether if you
want.

That way FF puts rightArea on the right before it gets confused by the
<option> elements.

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / CSS / April 2007

Drop Down menu breaks layout in Firefox