Select Box / Drop Down Menu (I Give Up)

Hi, i cannot seem to get my select box / drop down box working in all browsers… i have spent nearly a week trying to sort this and i cannot get it to work

The drop down menu does not show correctly in google chrome (mac) or safari (mac) or IE7 (PC) (there seems to be a padding issue) HOWEVER it shows fine in firefox (pc) and firefox (mac)

I have attached screenshots below of the problem and you can see my code on the following url:

I would be very grateful if someone could help me with this, as i just can’t get it to work, thanks in advance for your help…

Maybe you could try playing around with line-height. According to your screenshot, In Firefox the word “Gender” is vertically centered; in IE, it is not. I have never had such a problem with drop-down boxes. However, I did have this similar problem when trying to get text vertically centered in IE when it appeared just fine in Firefox. What I did was adjust the line-height. I don’t remember if I added some top and bottom padding. Just try line-height and see what it gets you.

Just an idea. I’m sure someone else will chime in.

Cool, thanks for your help… i will try this out when i get to my computer, thanks…

I tried that but it didn’t work :frowning:

Then try padding.

The inputs have a height of around 43px, so try declaring that on the select too.

select {
    width: 394px;
    height: 43px;

<select> elements are the most difficult element to style consistently in browsers. For this reason I simply don’t change the border / padding / line-height on them and let each browser use the native styling.

I’ve actually started using a js replacement for select elements which you may also want to use.

Cool, thanks… i will try this later, thanks :wink:

If I remember correctly you can set the height for selects on webkit mac only if you have changed the background.


Cool, thanks, i am looking forward to trying this…