Jump to content

Form displays differently in IE10 and Firefox


beckybramwell

Recommended Posts

My form is displaying differently in IE10 and Firefox. Not sure what I'm doing wrong. The aim is for it to look like the IE version. Thanks for any help in advance! 6hu8t5.png

#footer-form {float:right;height:200px;margin:0 5px 0 0;padding-top:5px;width:388px;} #quick-links h1,#footer-form h1 {color:#afafaf;font-family:Verdana, Geneva, sans-serif;font-size:12px;font-weight:bolder;letter-spacing:1px;line-height:1.1;margin:23px 0 0 -10px;padding:0 0 0 25px;}::-webkit-input-placeholder {font-family: Verdana, Geneva, sans-serif;font-size: 12px;color: #010101;font-style:italic;padding-left: 8px;}:-moz-placeholder { /* Firefox 18- */font-family: Verdana, Geneva, sans-serif;font-size: 12px;color: #010101;font-style:italic;padding-left: 8px;}::-moz-placeholder {  /* Firefox 19+ */font-family: Verdana, Geneva, sans-serif;font-size: 12px;color: #010101;font-style:italic;padding-left: 8px;}:-ms-input-placeholder {font-family: Verdana, Geneva, sans-serif;font-size: 12px;color: #010101;font-style:italic;padding-left: 8px;}div.myform {width:388px;}#myform form {background:#933;width:320px;}div.myform .input_text_name {background:#fff;border:none;height:28px;margin:3px 0 0 28px;width:144px;}div.myform .input_text_email {background:#fff;border:none;height:28px;margin:3px 0 0;width:144px;}div.myform .message {background:#fff;border:none;height:66px;margin:10px 0 0 28px;overflow:hidden;padding:7px;width:295px;}.shadow1 {-moz-box-shadow:	inset 0 0 20px #575757;-ms-box-shadow:	 inset 0 0 20px #575757;-webkit-box-shadow: inset 0 0 20px #575757;box-shadow:		 inset 0 0 20px #575757;}div.myform .button {margin: 7px 50px 0 0;border:0px;width:71px;height: 17px;border-radius: 5px;font-family: Verdana, Geneva, sans-serif;font-size: 10px;float: right;color: #000;   /* IE10 Consumer Preview */background-image: -ms-linear-gradient(top, #CACACA 0%, #575757 100%);/* Mozilla Firefox */background-image: -moz-linear-gradient(top, #CACACA 0%, #575757 100%);/* Opera */background-image: -o-linear-gradient(top, #CACACA 0%, #575757 100%);/* Webkit (Safari/Chrome 10) */background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #CACACA), color-stop(1, #575757));/* Webkit (Chrome 11+) */background-image: -webkit-linear-gradient(top, #CACACA 0%, #575757 100%);/* W3C Markup, IE10 Release Preview */background-image: linear-gradient(to bottom, #CACACA 0%, #575757 100%);  }

<div id="footer-form" class="myform"><h1>Message Us</h1><br class="clear"><form action="mailto:rebecca.bramwell@hotmail.co.uk" onSubmit="return validateForm()" method="post" name="myform" id="myform">				   			<label>			  			   <input type="text" class="input_text_name shadow1" name="name" id="name" placeholder="Name..."/>			</label>		  			<label>			  			   <input type="text" class="input_text_email shadow1" name="email" id="email" placeholder="Email..."/>			</label>		  		  		   <label>				<textarea class="message shadow1" name="feedback" id="feedback" placeholder=""></textarea>			  			<input type="submit" class="button" value="Send" />			  			</label></form></div><!--end footer-form-->

Link to comment
Share on other sites

Firefox seems to ignore some CSS properties in -moz-placeholder, like padding, margin, width, height.Use the padding-left:8px in .input_text_name and .input_text_email.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...