I’m finding that the height of a drop-down box is inconsistent across browsers if I don’t define it in <select>. I’m doing some absolute positioning that relies on a consistent vertical space in the area which includes the drop-down box so this makes me want to define it. However if I do define it, the text displayed in the drop-down box has an inconsistent vertical position across browsers.
Is there something I can do to keep both of these aspects of a drop-down box under control?
The size attribute on the select element controls how many options appear. Is that what you’re looking for?
Otherwise, you will have to set your own CSS defaults for the element since each browser renders form elements in a slightly different manner.
Maybe the culprit is the line-height or something like that, which has a different interpretation by the browsers.
But without seeing the page it’s only guessing.
Do you have (or can you make) a test page, so we can see what is happening?
With your remarks of what’s going wrong in which browser(version)s?
HI,
The select element is almost impossible to style the same cross browser especially as the controls can have a completely different appearance in some browsers.
To get them close to being the same you have to fiddle with line-height, height and padding. Some will use padding and some will use line-height to align the text, Some browsers will allow height to be changed and some will not. Newer browsers are better than they were but there are still differences.
I have this snippet saved but its a little out of date as the newer browsers now allow height to be changed but the code below still does apply a consistent appearance across the major browsers.
select{/* [B]height,line-height and padding can't be changed at all in IE6 and 7[/B]*/
padding:7px 2px 5px 10px;
height:32px;/* uses border box model (so padding and borders are included inside the width)*/
width:160px;
line-height:26px;/* older webkit mac doesn't use height but fiddle with line-height until it looks right*/
background:transparent;/* if you change the background then older safari and chrome mac will use height !!!!*/
}
So basically you have to find a happy medium that more or less suits them all.
Thanks, this is a tricky one. If I just set the height, do you know which browsers won’t obey?
Hi tonearm,
When you put a test page online:
But as Paul O’B said, it is unrewarding work to try to get it cross browser completely identical.
If it is extremely urgent to get them the same, you could consider to build a “look-a-like” for the dropdown select boxes with javascript (falling back to the normal <select> if javascript is disabled or not present).
But if you can give a link to a test page, who knows, maybe there is an alternative for the styling. 
As my snippet says if you change the background or a border then height will start working in various mac browsers but the problem is that some will not use line height to centre the text so you need to use padding as well as line height to get browsers on an even par. The snippet I posted above does just that so you just have to follow the same format.
Remember that a select element uses the border-box model so borders and padding are included inside the height and not additive.
IE7 and under allow no changes at all apart from font-size and color.
Yep, fiddling with padding and height seem to give me something pretty good. line-height is necessary for some browsers too?
So if I define a border I don’t need to use background:transparent; ?
In my tests that seems to be the case. You need to change something visually about the element and then it stops using its own routines and allows more css to work.