ewwatson - 1:54 am on Mar 25, 2008 (gmt 0)

Hello everyone! OK, I got this pure css form looking pretty good if I don't say so myself, "but" there are a couple issues I can't figure out on my own. The only browsers that I am having problems in is Safari and IE6 - the rest are perfect! In safari I can't get the input fields to except the background color - although the textarea does. And in IE6 as you know it does not do hover on anything but <a>. So what is the best solution for IE6 to show a:hover - javascript, expressions, alternate css? Here is the form code - thanks alot!

label, input {
display: block;
width: 300px;
float: left;
margin-bottom: 1em;
}
textarea {
display: block;
width: 300px;
height: 140px;
float: left;
margin-bottom: 1em;
}
label {
text-align: right;
width: 150px;
padding-right: 20px;
}
input.submit {
width: 5em;
float: none;
margin-left: 171px;
}
br {
clear: left;
}
form input, form submit, form textarea {
background: #EEEEDF;
}
input:hover, submit:hover, textarea:hover {
background: #FEFEF8;
}
input:focus, submit:focus, textarea:focus {
background: #FEFEF8;
}
#content {
margin: 75px 0 9em 80px;
font-size: 1.2em;
}

<form>

<label for="first name">First Name:</label>
<input id="first name" name="first name"><br>

<label for="last name">Last Name:</label>
<input id="last name" name="last name"><br>

<label for="email">Email:</label>
<input id="email" name="email"><br>

<label for="comments">Comments:</label>
<textarea id="comments" name="comments"></textarea><br>

<input type="button" value="Submit" class="submit">

</form>