Styling a web contact form

so i've been trying set contact form website, , have been trying style fit design of rest of page. functionally, form works perfectly, i'm having issue submit button ignoring css wrote , taking on style of text input boxes (which looks stupid).

here's css form:

code:

/*contact form*/  #contact-area {  	width: 600px;  	position: relative;  	top: 300px;  	right: -50px;  	z-index: 1  }  #contact-area input, #contact-area textarea {  	padding: 5px;  	width: 471px;  	font-size: 15px;  	color: #575757;  	line-height:18px;  	font-family:trebuchet ms;  	text-shadow:#fff 0px 1px 0, #000 0 -1px 0;  	border: 1px solid white;  	border-radius: 10px;  	background-image: -moz-linear-gradient(top, #bfbfbf, #d9d9d9 10%, #f2f2f2 88%, #f7f7f7 97%, #fcfcfc);  	background-image: -webkit-gradient(linear, center top, center bottom, from(#bfbfbf), to(#fcfcfc), color-stop(10%, #d9d9d9), color-stop(88%, #f2f2f2), color-stop(97%, #f7f7f7));  	box-shadow: inset 0 1px 0 white;  }  #contact-area textarea {  	height: 90px;  }  #contact-area textarea:focus, #contact-area input:focus {  	border: 1px solid blue;  }  .button  { border: font-size: 11px; color: #ffffff; font-weight: normal; font-family: arial; background-color: #cc0000; text-decoration: none;  }  label {  	float: left;  	text-align: right;  	margin-right: 15px;  	width: 100px;  	padding-top: 5px;  	font-size: 20px;  	color: #575757;  	line-height:23px;  	font-family:trebuchet ms;  	text-shadow:#fff 0px 1px 0, #000 0 -1px 0;  }  

, here's html:

code:

		<div id="contact-area">  			  			<form method="post" action="contactengine.php">  				<label for="name">name:</label>  				<input type="text" name="name" id="name" />  	  				<label for="email">email:</label>  				<input type="text" name="email" id="email" />  				  				<label for="message">message:</label><br />  				<textarea name="message" rows="20" cols="20" id="message"></textarea>    				<input type="submit" name="submit" value="send" class="button" />    			</form>  			  			<div style="clear: both;"></div>

am missing something?

 

attached files:

• 

  screen shot 2011-07-20 @ 10.20.07 am.png

  file size:

  22 kb

  views:

  34

you're styling input button using class .button, inherit styles #contact-area input rule, since submit button input. easiest way fix issue add input[type=text] input rule, make target input elements text, not submit buttons.

 

Forums Special Interests Web Design and Development

• iPhone
• Mac OS & System Software
• iPad
• Apple Watch
• Notebooks
• iTunes
• Apple ID
• iCloud
• Desktop Computers
• Apple Music
• Professional Applications
• iPod
• iWork
• Apple TV
• iLife
• Wireless