Dropdown (select) width in IE browsers (my fix)

[DigitalSky]

So, Internet Explorer bothers me for a lot of reasons, but one of the more prominent reasons is because of the way it renders dropdown (select) menus. Take a look at the way a dropdown menu works in any modern browser such as Safari, Firefox, or Chrome, and you'll see that even if you specify a set width (i.e. 200px) for the select in your CSS file, those browsers will always expand the dropdown menu once it's open so you can see anything that would otherwise be cut off.

Internet Explorer (even IE9) does NOT do this. If you specify a set width that is smaller than the contents of the dropdown menu, it simply cuts the rest off leaving it invisible to the user.

Here is a page of mine in question (please view it in IE8 or up)...

[pr-infrared.com...]

Those dropdown menus are set to 200px in width, but you'll notice when you click on them they expand (only in IE). I did this by using the following code...

#shopp select:focus {
  min-width: 200px;
  width: auto;
  z-index: 9999999999;
  position: absolute;
}

That little CSS bit makes sure that when the select element is in focus, it will expand to whatever width it needs to be.

There's other ways around this such as jQuery methods, etc. I wanted the cleanest and most streamlined approach so this method worked best for me.

The dilemma I'm having is that then you click on the 'Select Model' dropdown menu, the 'Accessories' menu gets lost behind it. Unless you click somewhere else on the page the Select Model menu stays in focus and the 'Accessories' menu is hidden.

I'm wondering if any of you CSS gurus might know a way to solve this using CSS and HTML only? Basically I just want it so that when you click on one of the dropdown menus the other one doesn't get hidden behind it, that's all.

I've racked my brain here but can't seem to figure out a way. Any help is greatly appreciated!

[DigitalSky]

Bump, any input is appeciated =]

[Fotiman]

Would using position: relative work?

#shopp select:focus {
  min-width: 200px;
  width: auto;
  z-index: 9999999999;
  position: relative;
}

[lucy24]

Those dropdown menus are set to 200px in width

Uhmm... No, they're not. They're set to at least 200px in width. There's nothing in your quoted code to stop them from being wider.

Where are the {border: none; margin: 0; padding: 0;} declarations? You can't leave anything to the User-Agent's discretion if you're dealing in explicit pixels.