HTML & CSS
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.
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
Then try padding.
The inputs have a height of around 43px, so try declaring that on the select too.
<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 http://harvesthq.github.com/chosen/ which you may also want to use.
Cool, thanks... i will try this later, thanks
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...
This topic is now closed. New replies are no longer allowed.