height: 22px;
In all browsers the text is vertically aligned middle except IE7.
I tried these CSS rules but no luck:
display: inline-block;
vertical-align: middle;
line-height: 12px;
padding:0 0 3px 0;
in IE7 the text sticks to the bottom.
I wouldn't consider the meta tag set for IE7 standard.
Is there a fix for this?
for MSIE browsers you need to pre-set the font rules for input and select elements...
input, select {font-family:'Times New Roman';font-size:100%; line-height:1.5em}
Usually this is done in a reset.css file. You can test this requirement by using the View>Text Size menu in IE...without the rule the text in select and input elements does not change size... with the rule it does... matching other browsers.
MSIE browsers have a setting "Enable visual styles on buttons and controls in web pages" which affects the rendering of select and other form elements.
to align the label element with a control I like this design pattern:
[label]Select:[select][option]this option[/option][/select][/label]
for Apple and Mobile type layouts
[label]Select:[br/][select][option]this option[/option][/select][/label]
again... you need to change the default style rules for label elements to make them consistent with the input and select elements.
label{font-size:100%; font-weight:bold}
The problem is also present with IE8. I tried your example using IE8 & IE7 (Developer tools) and it behaved the same. take a look at this post:
IE8 - Vertical alignment of a <select> element with a custom height
This one also states, that there is no possibility to even center a select element in IE:
how to make sure select option text align in the center in IE?
@Nima
You can also do that giving line-height to select in an IE-Only Stylesheet. In one of my assignment, I also had the same problem in IE. So, what I did is, I made an IE only style sheet for targeting IE andget required results. For making an IE-Only style sheet, you can refer this or this.
