[RESOLVED] Styled Forms & FireFox

[h3r0]

The Styled Forms in Firefox are being pushed down.

Click here for screenshot comparison

Any ideas on a fix?

The CSS for the form is:

.login {
	border: 1px solid #bdc1a3;
	background: url(img/input_box.gif) repeat-x;
	height: 11px;
	length: 50px;
	width: 50px;
	color: #990000;
	font-size: 9px;
}

[ray326]

Do you have vertical-align:middle on the inputs?

[h3r0]

Yes, and it has no effect with or without in FireFox...

[h3r0]

Does this not happen normally? Click for Live Demo

[ray326]

The form needs a div to be valid:

<form class="log">
<div>
<img src="img/user.gif"/>
<input class="login" type="text" name="username"/>
<img src="img/pass.gif"/>
<input class="login" type="password" name="pass"/>
</div>
</form>

And the imgs need to be vertical-align:middle, not vertical-align:bottom as you have them now.

[h3r0]

The <div> fixed the problem...must have skipped over that. ;( Thanks for your help