Welcome to WebmasterWorld Guest from 54.196.212.62

Forum Moderators: not2easy

Message Too Old, No Replies

Select box, CSS float, and Mozilla

CSS float causing extremely large select boxes in mozilla

     

corny

3:30 pm on Mar 10, 2003 (gmt 0)

10+ Year Member



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>

WibbleWobble

4:59 pm on Mar 10, 2003 (gmt 0)

10+ Year Member



I've not looked into how to solve it - because I'm soon to leave - but removing the width from #wrapper stops the dropdown expanding. As an irritating side effect, it right-justifies the paragraphs.

DrDoc

7:32 pm on Mar 10, 2003 (gmt 0)

WebmasterWorld Senior Member drdoc is a WebmasterWorld Top Contributor of All Time 10+ Year Member



Gecko (= Mozilla & Netscape) sometimes has problems with content not residing in a div. Making sure that everything is wrapped in divs might solve your problem.

For example:

<html>
...
<body>
<div>
...
</div>
</body>
</html>

 

Featured Threads

Hot Threads This Week

Hot Threads This Month