Select box, CSS float, and Mozilla

I'm trying to add a quick-launch select box to a fluid page with a float with the main content inside the float and the navigation structure (including the select box) outside. There are no styles specified for the select tag. This works fine in Opera 6/7 and IE 5/6. When I view the page in Mozilla or Netscape 7, the select box becomes ridiculously large--almost full-screen width--and clears the float. This is not at all my desired effect. While I can specify a width for the select box in my css and resolve this, I'd also like to understand why this is a problem. Abbreviated code follows. Any suggestions?

CSS:
body{
margin: 0;
padding: 0; /* required for Opera */
color:black;
}

#wrapper {
float:right;
width:78%;
}

HTML:
<div id="wrapper">
<p>Main content here</p>
<p>Main content here</p>
<p>Main content here</p>
<p>Main content here</p>
<p>Main content here</p>
<p>Main content here</p>

</div>

<form method="post" action="" onsubmit="return false;">
<select onchange="location.href=this.value;">
<option>Option</option>
<option value="page1.htm">Page One</option>
<option value="page2.htm">Page Two</option>
<option value="page3.htm">Page Three</option>
</select>
</form>
<ul>
<li><a href="page.htm">Link 1</a></li>
<li><a href="page.htm">Link 1</a></li>
<li><a href="page.htm">Link 1</a></li>
<li><a href="page.htm">Link 1</a></li>
</ul>

Select box, CSS float, and Mozilla

CSS float causing extremely large select boxes in mozilla

corny

WibbleWobble

DrDoc

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week