Friends
If you are using Firefox and Internet Explorer browsers and look at my project website at:
www.kwatza.com---->find out (navigation),
the text area box is not properly align. But if you are using chrome, everything is working well.
Any idea how to fix this? Thank you in advance.
Below are my partial html coding that directly relates to text area (you can also see this by using view page source).
<div id="contactForm">
<h2>Contact me</h2>
<form action="index.php" method="post">
<label>Message:</label><br />
<textarea name="message" rows="20" cols="20"><?php if($_POST['message']) { echo $_POST['message']; } ?></textarea><br/>
</form>
</div><!--end of contact form-->
Below are my partial CSS that directly relates to text area:
textarea {
width: 25em;
margin-bottom: .5em;
}
/********************************************************************
* styles for contact form
********************************************************************/
#contactForm {
margin-top: 20px;
width: 500px;
padding-bottom: 75px;
margin-right: auto;
margin-left: auto;
}
#contactForm input, #contactForm textarea {
border: 1px solid #ccc;
font-family: Helvetica, arial, sans-serif;
font-size: 14px;
margin: 0px 0px 10px 0px;
padding: 2px;
width: 379px;
}
#contactForm textarea {
height: 110px;
}
#contactForm textarea:focus, #contactForm input:focus {
border: 1px solid #888;
background-color: #CFFCA7;
}
#contactForm label {
float: left;
font-size: 14px;
margin-right: 15px;
text-align: right;
width: 100px;
}
#contactForm input.submit {
cursor: pointer;
float: right;
width: 130px;
}
#contactForm h2, #contactForm h3 {
margin-left: 115px;
}
#contactForm .error {
color: #ff0000;
margin-left: 115px;
}