Why does my contact form render incorrectly on windows browsers?
I have creat开发者_StackOverflow中文版ed a contact form on the contact us page of a website I am building. Mac browsers render it properly, so does IE7 AND IE8 on Windows.
FF, Chrome and Safari have issues with spacing on the Windows platform. My code is listed below;
<form action="" method="post">
<fieldset id="fs1">
<div id="formLeftCol">
<ol>
<li>
<label for="name">Your Name*</label>
</li>
<li>
<input id="name" name="name" type="text" />
</li>
<li>
<label for="email">E-mail*</label>
</li>
<li>
<input id="email" name="email" type="text" />
</li>
<li>
<label for="website">Website</label>
</li>
<li>
<input id="website" name="website" type="text" />
</li>
<li>
<input type="submit"name="submit" value="SUBMIT" />
</li>
</ol>
</div>
<div id="formRightCol">
<ol>
<li>
<label>Your Message*</label>
</li>
<li>
<textarea name="message" cols="40" rows="7">
Please leave us a message...
</textarea>
</li>
</ol>
</div>
</fieldset>
</form>
Now the CSS:
#formLeftCol, #formRightCol {
float: left;
}
#formLeftCol {
width: 150px;
}
#formRightCol {
width: 473px;
margin-left: 15px;
}
input, textarea {
background: #f9f9f9;
border: 1px solid #c1c1c1;
font-family: Helvetica, Arial, sans-serif;
color: #818181;
margin: 10px 0;
padding: 10px;
}
fieldset {
padding: 15px;
}
textarea {
width: 451px;
}
#fs1 {
border: 1px solid #c1c1c1;
}
The textarea will not space itself accordingly, it's too wide on these browser, but every other one works.
Thanks
Your problem is in the CSS for sure. I'm not sure what you've got going on with OSX, but I see the issue in a bunch of browsers on Windows (IE, FF, Chrome).
Try specifying a width for your inputs via CSS:
input {
width:141px;
}
That seems to give the effect I'm imagining you want: http://jsfiddle.net/P5jkJ/1/
精彩评论