Welcome to WebmasterWorld Guest from 54.146.59.202

Forum Moderators: not2easy

Message Too Old, No Replies

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

     
2:33 am on Mar 2, 2013 (gmt 0)

5+ Year Member



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!
10:17 pm on Mar 9, 2013 (gmt 0)

5+ Year Member



Bump, any input is appeciated =]
2:06 am on Mar 10, 2013 (gmt 0)

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



Would using position: relative work?

#shopp select:focus {
min-width: 200px;
width: auto;
z-index: 9999999999;
position: relative;
}
3:15 am on Mar 10, 2013 (gmt 0)

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month



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.
 

Featured Threads

Hot Threads This Week

Hot Threads This Month