Background image + border for form field is badly misaligned

[blinnw]

The grey outline on the input fields of contact form on this page is badly misaligned.
http://reputationadvocate.com/about-us/

It is the blue box "Get Help Now" - here:
The grey outline should align exactly with the edges of the white background.

I found this code in style sheets but do not see another place where code relating to this issue might reside. This is a custom Wordpress site.

Thanks in advance for your help!


#right .gform_body ul, #firststeps .gform_body ul{
margin: 0px;
list-style: none;
}

#right .gfield_label, #firststeps .gfield_label{
display: none;
}

#right .gfield input, #firststeps .gfield input{
width: 229px;
height: 37px;
background-image: url(images/form_field.jpg);
border: 0px !important;
margin-bottom: 20px;
font-size: 16px;
padding-left: 10px;
color: #838383;
text-transform: uppercase;
}

#right .gform_button, #firststeps .gform_button{
background-color: #5074b2;
color: white;
padding: 5px 10px;
margin-bottom: 15px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 0px;
font-size: 15px;
text-transform: uppercase;
font-weight: bold;
}

#right .gform_edit_link, #firststeps .gform_edit_link{
display: none;
}

a{
outline: 0px !important;
}

[Excavator]

Hello blinnw,
Maybe this will help -

#right .gfield input, #firststeps .gfield input {
    background: url("images/form_field.jpg") no-repeat;
    border: 0 none !important;
    color: #838383;
    font-size: 16px;
    height: 37px;
    margin-bottom: 20px;
    padding-left: 10px;
    text-transform: uppercase;
    width: 229px;
}

[blinnw]

Excavator,
Thanks very much for your response - I did try this but it doesn't seem to work, even after clearing cache. Is there another spot I could insert the no-repeat?

[Excavator]

I don't see that the CSS has changed at all. Can you upload your current version?

[blinnw]

Oh, sorry- after it didn't work I reverted to the original code. It's now updated to the code you suggested. Thanks...do you see anything now?

[blinnw]

Excavator- here is also the code for the sidebar.php

<div class="col omega">
<?php if ( ! is_page('16') && ! is_page('312') && ! is_page('319') ) { ?>
<div id="firststeps">


<h2><span style="text-decoration: none; color: #236cb4;"> Get Help Now.</span></a></h2>
<p style= "font-size: 11pt; line-height:150%">Request your free consultation.</p>
<?php
$recentPosts = new WP_Query();
$recentPosts->query('page_id=29');
?>
<?php while ($recentPosts->have_posts()) : $recentPosts->the_post(); ?>
<?php the_content(); ?>
<?php endwhile; ?>
<p>We promise to never sell your information to anyone. View our <a href="/contact-2/privacy-policy/" TARGET="_blank">Privacy Policy</a>.</p>

</div>
<?php } else { ?>

[Excavator]

Originally Posted by blinnw

Oh, sorry- after it didn't work I reverted to the original code. It's now updated to the code you suggested. Thanks...do you see anything now?

It looks to have fixed the issue with your Name/Email/Phone buttons. If you are still seeing the problem, probably in IE, refresh your browser and see if that shows you the current version.

You should have a look at some easily correctable errors in your code. See the 66 errors the validator comes up with. See the links about validation in my signature line below.

[blinnw]

Excavator- thank you very much for your help!
I will also take a look at the 66 errors you mentioned...

This is what ended up working:

#right .gfield input, #firststeps .gfield input {
background: url(images/form_field.jpg); background-repeat: no-repeat;
border: 0 none !important;
color: #838383;
font-size: 16px;
height: 37px;
margin-bottom: 20px;
padding-left: 10px;
text-transform: uppercase;
width: 229px;
}