View Full Version : Content too long in SELECT form element.

04-27-2006, 03:17 PM
Hi gang.

For the area I have alotted on my page by the designer of our project I have a size issue with the form elements. Specifically the <select> and <option> contents. I have a area approx.200pixels wide. Some of the option elements are well over 400pixels though.

Of course this renders perfectly in FireFox, but IE simply cuts it off. I can't figure out and CSS trickery to resolve this. Perhaps a JS script may work here?

And to clarify I canNOT trim the option contents, they need to remain their current length.

Thanks for any help guys!

04-27-2006, 04:41 PM
The only solution I can think of would be to use this script:
<select> Something New, Part 2 (http://www.easy-designs.net/articles/replaceSelect2/)
<select> Something New, Part 1 (http://www.easy-designs.net/articles/replaceSelect/)

04-27-2006, 05:34 PM
Cool! Thanks Kravvitz I will try one of those. :thumbsup:

04-27-2006, 05:55 PM
make your own fake css dropdown then you can wrap the options to the next line

<style type="text/css">
#dropdown {width:240px; height:84px; border:2px inset #ccc; overflow:auto;}
#dropdown a {text-align:left; font:9pt/10pt arial,verdana,sans-serif; padding-left:2px; margin:0; white-space:nowrap;}
#dropdown a.menu:link {text-decoration:none; display:block; background-color:#fff; color:#000;}
#dropdown a.menu:visited {text-decoration:none; display:block; background-color:#fff; color:#000;}
#dropdown a.menu:hover {text-decoration:none; display:block; background-color:#000; color:#fff;}
#dropdown a.menu:active {text-decoration:none; display:block; background-color:#000; color:#fff;}

<div id="dropdown">
<a class="menu" href="index.htm" target="_top">How To Download Files</a>
<a class="menu" href="bestdropdownmenu.htm" target="_top">Best Dropdown Menu</a>
<a class="menu" href="embeddingmediainhtml.htm" target="_top">Embedding Media In HTML</a>
<a class="menu" href="miscellaneousinternettips.htm" target="_top">Miscellaneous Internet Tips</a>
<a class="menu" href="pubcomp.htm" target="_top">Using Public Computers</a>
<a class="menu" href="uncorruptinghtmlfiles.htm" target="_top">Uncorrupting HTML Files</a>
<a class="menu" href="validatorcheats.htm" target="_top">HTMLValidator Cheats</a>
<a class="menu" href="yahoogeocitiestips.htm" target="_top">Yahoo! Geocities Tips</a>
<a class="menu" href="worldgeocities.htm" target="_top">World Geocities</a>