homepage Welcome to WebmasterWorld Guest from 54.227.12.219
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
Select box, CSS float, and Mozilla
CSS float causing extremely large select boxes in mozilla
corny




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

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




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

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




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

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>

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved