beckybramwell Posted March 10, 2013 Share Posted March 10, 2013 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! #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 More sharing options...
mambabomba Posted March 11, 2013 Share Posted March 11, 2013 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 More sharing options...
beckybramwell Posted March 11, 2013 Author Share Posted March 11, 2013 Brilliant. Thank you! Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now