Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Background image + border for form field is badly misaligned

    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;
    }
    Attached Thumbnails Attached Thumbnails Background image + border for form field is badly misaligned-screen-shot-2012-02-12-5.32.25-pm.png  

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,692
    Thanks
    22
    Thanked 1,830 Times in 1,814 Posts
    Hello blinnw,
    Maybe this will help -
    Code:
    #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;
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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?

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,692
    Thanks
    22
    Thanked 1,830 Times in 1,814 Posts
    I don't see that the CSS has changed at all. Can you upload your current version?
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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?

  • #6
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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 { ?>

  • #7
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,692
    Thanks
    22
    Thanked 1,830 Times in 1,814 Posts
    Quote Originally Posted by blinnw View Post
    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    blinnw (02-19-2012)

  • #8
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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;
    }


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •