DEMOIn IE, the dropdown-list takes the same width as the dropbox (i hope i am making sense) whereas in Firefox the dropdown-list's width varies according to the content.
This basically means that i have to make sure that the dropbox has to be wide enough to display the longest selection possible. this makes my page look very ugly :(
Is there any workaround for this problem? How can i uses CSS to set different widths for dropbox and the dropdownlist?
Creating your own drop down list is more of a pain than it's worth. You can use some javascript to make the IE drop down work.
Check out this solution here: http://www.hedgerwow.com/360/dhtml/ui_select_with_fixed_width/demo.php
http://www.hedgerwow.com/360/dhtml/ui_select_with_fixed_width/ie-select-width-fix.js
It uses a bit of the YUI library and a special extension for fixing IE select boxes.
You will need to include the following and wrap your elements in a
Put these before the body tag of your page:
<script src="http://us.js2.yimg.com/us.js.yimg.com/lib/common/utils/2/yahoo_2.0.0-b3.js" type="text/javascript">
script>
<script src="http://us.js2.yimg.com/us.js.yimg.com/lib/common/utils/2/event_2.0.0-b3.js" type="text/javascript">
script>
<script src="http://us.js2.yimg.com/us.js.yimg.com/lib/common/utils/2/dom_2.0.2-b3.js" type="text/javascript">
script>
<script src="ie-select-width-fix.js" type="text/javascript">
script>
<script>
// for each select box you want to affect, apply this:
var s1 = new YAHOO.Hack.FixIESelectWidth( 's1' ); // s1 is the ID of the select box you want to affect
script>
Creating your own drop down list is more of a pain than it's worth. You can use some javascript to make the IE drop down work.
Check out this solution here: http://www.hedgerwow.com/360/dhtml/ui_select_with_fixed_width/demo.php
http://www.hedgerwow.com/360/dhtml/ui_select_with_fixed_width/ie-select-width-fix.js
It uses a bit of the YUI library and a special extension for fixing IE select boxes.
You will need to include the following and wrap your elements in a
Put these before the body tag of your page:
<script src="http://us.js2.yimg.com/us.js.yimg.com/lib/common/utils/2/yahoo_2.0.0-b3.js" type="text/javascript">
script>
<script src="http://us.js2.yimg.com/us.js.yimg.com/lib/common/utils/2/event_2.0.0-b3.js" type="text/javascript">
script>
<script src="http://us.js2.yimg.com/us.js.yimg.com/lib/common/utils/2/dom_2.0.2-b3.js" type="text/javascript">
script>
<script src="ie-select-width-fix.js" type="text/javascript">
script>
<script>
// for each select box you want to affect, apply this:
var s1 = new YAHOO.Hack.FixIESelectWidth( 's1' ); // s1 is the ID of the select box you want to affect
script>
Post acceptance edit:
You can also do this without the YUI library and Hack control. All you really need to do is put an onmouseover="this.style.width='auto'" onmouseout="this.style.width='100px'" (or whatever you want) on the select element. The YUI control gives it that nice animation but it's not necessary. This task can also be accomplished with jquery and other libraries (although, I haven't found explicit documentation for this)
-- amendment to the edit: IE has a problem with the onmouseout for select controls (it doesn't consider mouseover on options being a mouseover on the select). This makes using a mouseout very tricky. The first solution is the best I've found so far.
