Form display problem in IE, but ok in other browsers

[rogerte]

I have created a website that is basically an enquiry form. I have used CSS and HTML. I have also used curveycorners javascript.

In IE8 (haven't tried in other versions of IE) the form displays correctly except the first textbox (user) doesn't display, although the label does.

FF, Opera and Chrome all display the form correctly (with rounded edge boxes which IE8 doesn't)

(Ignore the submit "link" - it's something the person I am writing it for wants. Personally I hate it)

Can anyone tell me why that text box doesn't display and what I need to change?

Thanks

Roger

The CSS is:

.FormStyleText{
 	left: 150px;
 	margin:2px;
 	border-style: 2px solid #0F6FBD;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #0F6FBD;
	border-right-color: #0F6FBD;
	border-bottom-color: #0F6FBD;
	border-left-color: #0F6FBD;
        -moz-border-radius: 10px;
        -khtml-border-radius: 10px;
        -webkit-border-radius: 10px;
        border-radius: 10px;
 	color:#666;
        font-family: "Calistra, Verdana, sans-serif";
        font-size: 12px;
}


/*Credits: Dynamic Drive CSS Library */
/*URL: [URL unfurl="true"]http://www.dynamicdrive.com/style/[/URL] */

.cssform p{
width: 750px;
clear: left;
margin: 0;
padding: 5px 0 8px 0;
padding-left: 155px; /*width of left column containing the label elements*/
font-family: "Calistra, Verdana, sans-serif";
font-size: 12px;
}

.cssform label{
float: left;
margin-left: -155px; /*width of left column*/
width: 150px; /*width of labels. Should be smaller than left column (155px) to create some right margin*/
}


.cssform textarea{
width: 500px;
height: 130px;
}


.submit {
        font-family: "Calistra, Verdana, sans-serif";
        font-size: 12px;
	background: transparent;
	border-top: 0;
	border-right: 0;
	border-bottom: 1px solid #0F6FBD;
	border-left: 0;
	color: #00F;
	display: inline;
	margin: 0;
	padding: 0;
        cursor: pointer;
        cursor: hand;
}

*:first-child+html .submit {		/* IE 7/8 */
	border-bottom: 0;
}

The HTML is:

<form class="cssform" method="post">
<p>
<label for="user">Name:</label>
<input type="text" class="FormStyleText" name="user" style="height: 30px; width: 350px;" value="" />
<br />
</p>

<p>
<label for="mail">Email:</label>
<input type="text" class="FormStyleText" name="mail" style="height: 30px; width: 350px;" value="" />
<br />
</p>

<p>
<label for="mailconf">Confirm Email:</label>
<input type="text" class="FormStyleText" name="mailconf" style="height: 30px; width: 350px;" value="" />
<br />
</p>

<p>
<label for="messtitle">Message Title:</label>
<input type="text" class="FormStyleText" name="messtitle" style="height: 30px; width: 500px;" value="" />
<br />
</p>

<p>
<label for="MessText">Message Text:</label>
<textarea  class="FormStyleText" name="MessText"></textarea>
<br />
</p>

Click<input class="submit" type="submit" value="here" />to send your message
	      
</form>

 

[vacunita]

Its there for me in IE8, and IE8 in compatibility View.
I see all inputs just fine.

Although not related to the issue, your form inputs have no ID's so the <label>'s "for" attributes are pointing to nothing.



----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

 

[rogerte]

Thanks for your answer.

I've done some more investigation and it appears it is caused by the curvycorners javascript.

I can't see the obvious reason why, but the moment the js is applied to any div that, somewhere within its child dependencies, has a form, then the first text input of that form does not display.

Applies to ie6/7 and 8