Trying to create an email opt-in box using Wordpress with a pre-installed theme. The box appears correctly in Firefox but is displaying incorrectly in Chrome. Issues include no padding in the text fields, different font colors, and extra padding above and below the submit button.
Adding !important doesn't seem to solve the problem.
You can view the website at . The opt-in box is located at the top of the page and works fine in Firefox. It's confusing since there's usually no difference between Chrome and Firefox, only with IE.
Here is the code for the box:
<div style="background-color:#efefef; padding:0; margin:0; -webkit-box-sizing:content-box !important; -moz-box-sizing:content-box !important; box-sizing:content-box !important;">
<span style="font-family: 'Rouge Script', cursive; font-size:30px; line-height:16px; color:#8e8e8e; margin-right:15px; padding-left:15px;"> 5 easy ways to save money on your wedding...</span>
<form style="display:inline; margin:0px; padding:0px; height:100%;" action="https://madmimi.com/signups/" method="post" target="_blank">
<input style="display:inline; margin:0px; font-family: 'Rouge Script', cursive; font-size:28px; line-height:22px; height:40px; border:none; color:#acacac; background-color:#fff; width:200px; padding-left:10px; margin-right:5px;" id="signup_first_name" name="signup[first_name]" type="text" placeholder="first name">
<input style="display:inline; margin:0px; font-family: 'Rouge Script', cursive; font-size:28px; line-height:22px; height:40px; border:none; color:#acacac; background-color:#fff; width:200px; padding-left:10px; margin-right:11px;" name="signup[email]" type="text" placeholder="email">
<input style="background-image:none; border: none; background-color:#023972; color:#fff; font-family: 'Rouge Script', cursive; font-size:28px; padding:10px;" value="get it!" type="submit" class="submit">
</form>
</div>