Make IE <select> dropdown menus behave like they do in FF

[dreamingdigital]

Is there a way/trick to make <select> drop down menus in Internet Explorer behave like they do in Firefox? If I assign a width of say 200px to the menu and the content is more like 300px, in FF once you click on the menu it will expand and show the content but in IE it will remain at 200px and hide the content. What's the trick?

CP

[VIPStephan]

HTML combo boxes are kind of difficult to style, especially in IE. For example, they will always be on top of other elements in terms of z index (layers), and there’s no cross browser solution to equally style some form elements without using JavaScript.

I hope this article (http://easy-designs.net/articles/replaceSelect/) can help you a little? But be aware: accessibility, semantics, and usability come first and then comes the styling.

[dreamingdigital]

Interesting article. Bookmarked.

I'm not sure I want to do it that way. I'm going to experiment with changing the width via javascript style and putting the <select> as position absolute within a relative position DIV with the height of a typical <select>

At least that will get me started and possibly find out how annoyingly wrong that will be. *sigh*

The <select> menus are dynamically driven product attributes so I have to keep it all templateable within a loop.

CP

[dreamingdigital]

OK, IE makes you have to click the <select> twice if you resize it onfocus/click because it auto closes. I'm not 100% sure what I want to do.

FWIW, here is my test code that made me realize there's no point:

<div style="width:300px; background:red;">
<form name="test">
Do you want it?
<select size="1" name="boo" style="width:300px;" onclick="this.style.width='auto';" onblur="this.style.width='300px';">
<option value="">Select One</option>
<option value="1">Yes, I want it and you'll give it to me now. I can't believe you took it from me</option>
<option value="2">No, you can have it</option>
</select>
</form>
</div>

[dreamingdigital]

And... this is the code idea I ended up implementing.... for now.

<div style="width:300px; background:red;">
<form name="test" style="margin:0; padding:0;">
Do you want it?
<?php if($ie) { ?>
<div style="position:relative; display:block; width:300px; height:30px; overflow:visible;">
<div style="position:absolute; display:block; top:0px; left:0px;">
<select size="1" name="boo">
<?php } else { ?>
<select size="1" name="boo" style="width:300px;">
<?php } ?>
<option value="">Select One</option>
<option value="1">Yes, I want it and you'll give it to me now. I can't believe you took it from me...</option>
<option value="2">No, you can have it</option>
</select>
<?php if($ie) { ?>
</div>
</div>
<?php } ?>


The reason for needing the absolute positionning of the <select> is because that area of the page is in a <div> with a specific width and it's floating with a sidebar <div> at another specific width all within a container div. If the <select> is bigger than 300px the nav div gets pushed below the other div because the pieces no longer fit together. Tables would be more forgiving here but I want the code of the huge navbar to load at the bottom of the page so my page content is at the top of the source for seo purposes.

CP

[theNetSmith]

Thanks for sharing your experiences with this issue, Colin.

The outer DIV in IE, however, is expanding to accommodate the full width of the SELECT, whose OPTION data caused it to grow. I changed the relevant portion of the CSS to "overflow-x:hidden; overflow-y:visible;" and got the desired effect. Also had to add a "border-right" value because only 3 sides of the SELECT were visible.

Of course, the dropdown arrow at the right side of the SELECT is not visible, forcing the user to click in the text area to cause the dropdown to appear. If there were a way to pop up the dropdown via JavaScript, this could be compensated for with an arrow graphic just to the right of the DIV. Oh well... It's still better than the other alternatives I came across.

-T