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

January 23, 2007

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;
}


Two-column layout: fine in Firefox, Safari and IE7, breaks in IE6

January 18, 2007

The code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Example</title>
<style type="text/css">@import url(css/styles.css);</style>
<body>
<div id="container">
<div id="main">
<p>Lorem ipsum dolor sit amet, ...</p>

<p>Maecenas a enim vitae est ...</p>
</div>

<div id="sidebar">
<p>Lorem ipsum dolor sit amet, ...</p>
</div>

</div>
</body>
</html>

The CSS:
#container {
position: absolute;
top: 0;
left: 50%;
width: 606px;
margin-left: -303px;
}

#main {
float:left;
width:366px;
margin:32px;
padding: 0;
}

#sidebar {
float:right;
width:144px;
margin:32px 32px 32px 0;
padding: 0;
}

Looks fine in Firefox (and IE7 and Safari):

Two-column layout in Firefox

But breaks in IE6, with the second column dropping below the first one:

Two-column layout in IE6

Why does this happen?
The reason the layout breaks in IE6 is due to the IE Doubled Float-Margin Bug.

The fix
Add the declaration:
display: inline;
to #main and #sidebar.