No replies
beckybramwell
beckybramwell's picture
Offline
newbie
Last seen: 1 year 14 weeks ago
Timezone: GMT+1
Joined: 2012-02-26
Posts: 10
Points: 16

My form is showing up differently in IE10 and Firefox and I don't know what I'm doing wrong.

The aim is for it to look like the IE10 one. 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:[email protected]" 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-->