Use em instead of px for height attribute when styling drop-down form elements

As 456 Berea Street recently pointed out in an excellent and very comprehensive article on form controls styled with CSS, there is no effective way to make them look consistent in all browsers. Nethertheless, I was called upon today to fix a styled form element that looked good in Firefox and IE6, but broke in IE7.

Form styled with CSS displays differently in IE7 than in Firefox and IE6

The form code:
<form>
<select name="sampleform" id="sampleform" onChange ="setSelected(this)";>
<option value="0">Variation 01</option>
<option value="1">Variation 02</option>
<option value="2">Variation 03</option>
</select>
</form>

The CSS that broke in IE7:
select {
width: 130px;
height: 14px;
text-align: left;
font-family: "Arial", "Helvetica", sans-serif;
color: #000;
font-size: 9px;
}

I found that by changing the height from the absolute size of 14px to the relative size of 1.8em, I was able to get the most consistent results cross-browser between Firefox, IE6, and IE7.

select {
width: 130px;
height: 1.8em;
text-align: left;
font-family: "Arial", "Helvetica", sans-serif;
color: #000;
font-size: 9px;
}

Advertisements

One Response to Use em instead of px for height attribute when styling drop-down form elements

  1. donie says:

    uh,, web designer is not an easy job too 😦

%d bloggers like this: