oo7ml — 2011-12-08T06:42:27-05:00 — #1
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...
cheesedude — 2011-12-08T07:41:32-05:00 — #2
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.
oo7ml — 2011-12-08T09:31:43-05:00 — #3
Cool, thanks for your help... i will try this out when i get to my computer, thanks...
oo7ml — 2011-12-09T09:31:57-05:00 — #4
I tried that but it didn't work
cheesedude — 2011-12-10T12:25:13-05:00 — #5
Then try padding.
victorinox — 2011-12-10T15:20:25-05:00 — #6
The inputs have a height of around 43px, so try declaring that on the select too.
markbrown4 — 2011-12-10T18:44:48-05:00 — #7
<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.
oo7ml — 2011-12-11T13:51:25-05:00 — #8
Cool, thanks... i will try this later, thanks
paulob — 2011-12-15T05:45:06-05:00 — #9
If I remember correctly you can set the height for selects on webkit mac only if you have changed the background.
oo7ml — 2011-12-15T06:14:47-05:00 — #10
Cool, thanks, i am looking forward to trying this...