Forms in IE7

[starryb]

Hello,

 

This page in IE7 creates dark borders around the form and heavy lines for the input parts too. I'm attaching a PDF.

 

This is the HTML for the form

 

<form action="contactform.php" form id="ContactFrm" name="form1" enctype="application/x-www-form-urlencoded" method="post" onSubmit="return validateThis(this)" >

<fieldset>

<legend>

<label for="Company_Organization">Company or Organization:<br />

</label>

 

<input type="text" name="Company_Organization" id="CompanyorOrganization" tabindex="10" />

</legend>

<p>

<label for="Name">Contact Name:<br />

</label>

<input type="text" name="Name" id="Name" tabindex="20" />

</p>

<p>

<label for="Phone">Phone Number:<br />

</label>

<input type="text" name="Phone" id="Phone" tabindex="30" />

</p>

<p>

<label for="Email">Email Address:<br />

</label>

<input type="text" name="Email" id="Email" tabindex="40" />

</p>

<p>

<label for="CommentsQuestions">Comments? Questions?<br />

</label>

<textarea name="CommentsQuestions" id="CommentsQuestions" cols="45" rows="5" tabindex="50"></textarea>

</p>

<p>

<input type="submit" name="submit" id="Send" value="Send" tabindex="260" />

</p>

</fieldset>

</form>

 

 

And the CSS

/*Contact Us Form*/

input#Send {font-family:Palatino, Georgia, "Book Antiqua", serif;

color:#663333;

background-color:#FFF;

height: 30px;

width: 100px;

border-width:thin;

 

 

}

 

input#CompanyorOrganization {

border-width:thin;

border-color:#663333;

width:400px;

}

 

input#Name {

border-width:thin;

border-color:#663333;

width:400px;

 

}

 

input#Phone {

border-width:thin;

border-color:#663333;

width:400px;

 

}

 

input#Email {border-width: thin;

border-color:#663333;

width:400px;

}

form#ContactFrm {margin-left: 50px;

}

 

form#ContactFrm fieldset {border: 1px;

border-color:#663333;

}

 

form#ContactFrm fieldset label {line-height:2.75em;

font-size: .95em;

}

 

form#ContactFrm fieldset p {line-height:2.75em;

font-size: .95em;

}

 

input {width:210px;

height: 20px;

 

}

textarea#CommentsQuestions {

width:400px;

height:100px;

border-color:#663333;

border-width:thin;

}

 

 

I've started a separate CSS file to specifically target this issue:

 

/*Contact page_form*/

form#ContactFrm {border-color: transparent;

}

 

 

 

 

What am I missing? How do I get rid of the dark border around the form? And create a lighter border around the inputs?

 

Thanks!

[virtual]

Remove the fieldset and legend tags, they are not showing in the other browsers anyway, and IE7 will play nice.

[starryb]

Thanks virtual!

 

Remove the fieldset and legend tags, they are not showing in the other browsers anyway, and IE7 will play nice.