styling input types text and submit in IE

I’m no css-hero, so I find myself frequently searching for answers that several styling problems set. Most of these problems arise in internet explorer, but I guess that is no surprise to those who try to implement web standards on their websites. One of the problems I’ve had (and have) is that in internet explorer (IE) the submit button is styled differently than the text inputs. A difference that becomes visible especially when you like to use a border on your submit button.

Let’s take a look at this problem. Suppose you have the following html code for your form:

<form method="get" id="searchform" action="somescript.php">
<div>
<input type="text" value="search..." name="s" id="s" />
<input type="submit" id="searchsubmit" value="Go!" />
</div>
</form>

Forms can only contain block level tags. So that’s why I use a div inside it. Maybe that’s semantically not the most correct way, but the web-standards-police won’t put you in jail for it. A discussion about this can be found at simplebits. To be honest, I had no clue about this until recently. That’s why I mention this here.

What does this form look like in IE and Firefox (FF)? Something like this:

Sure it doesn’t look too nice, and the differences are there, and if you leave your website with buttons like these I don’t think you’ll care for these differences. But we like to style our inputs, and have them both with a border-color #666666 and a white background. So add:

input { border: 1px solid #666; background-color: #fff; }

to your stylesheet and you’ll get the following:

The text input sizes are different in width. And, very annoying, the submit button in IE is bigger that the text input. So the first problem is to make both text inputs the same width. That’s easy. Add the following to your stylesheet and look at the result:

#s { width: 120px; }

Looks slightly better, though a small visual difference between the two is caused by my bad copy/paste skills. So now the second problem: the height of the input button. Some might think that it’s just a matter of setting a height here, so that both have the same. Like:

#searchsubmit { height: 20px; }

But doing that brings trouble in FF (you’ll have to verify this yourself if you don’t believe me). And setting height for both submit and text inputs won’t do either. Let’s assume I do the following:

#searchsubmit { height: 20px; }
#s { width: 120px; height: 20px; }

Then I get the following result:

They are aligned differently, and don’t have the same height! So what is the solution? I’m happy with adding a vertical-align: middle and an extra 4 px for the submit button. That will keep the submit and text inputs lined up nicely next to eachother and will display visually the same height for them. Both in IE and FF. Adding an extra touch with padding-bottom: 1px for the submit button displays the text in it somewhat more vertically in the middle in FF. My stylesheet now looks as follows:

input { border: 1px solid #666; background-color: #fff; vertical-align: middle; }
#searchsubmit { height: 20px; padding-bottom: 1px; }
#s { width: 120px; height: 24px; }

And here’s what it looks like:

Now don’t jump into the air yet. It’s far from perfect.

First, when you use a double border at 3px for both inputs, it seems that you have to use 8px more in height for the submit button (in this example 20px and 28px respectively).

Second: Opera. We’ll want this to work in both FF, IE and Opera. And for Opera, we’ll have to leave out the height on the text input. With a single border, I use the vertical-align, a height of 30px on the submit button, and a padding of 6px on the text input. Or the same with a different height: a padding of 2px for the text input and a height of 22px for the submit button. The 6px/2px turns in something else when we speak about double borders. Example, similar to what I use on this site:

input { border: 1px solid #666; vertical-align: middle; }
#searchsubmit { height: 22px; }
#s { padding: 2px; }

Take a look at my search form and you’ll see the result.
Third: unfortunately things break when you do ctrl/+ in FF, as it seems the submit button doesn’t grow in height as the text input does. A max-height for the text-input could solve this but I’m not a fan of that either.

Fourth, when you use the “Opera-friendly” styling mentioned above, zooming in (about 150%) in Opera you still see that the submit button is somewhat larger.

Coming to a conclusion here. There’s only one thing I can say: There must be better methods out there. If you know of one, please let me know. :-)