Stylesheets - Drop Down menu breaks layout in Firefox

Author

Drop Down menu breaks layout in Firefox

calebih@gmail.com

2007-04-24, 6:18 pm

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!

Ben C

2007-04-24, 6:18 pm

On 2007-04-24, calebih@XXXXXXXXXX <calebih@XXXXXXXXXX> wrote:
> 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.

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.