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: http://goo.gl/7XAIz
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.
<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.