Wordpress contact form 7 possibly CSS or LESS issue in IE8

Question

My clients site has a contact form in the site footer provided by the ContactForm7 plugin for Wordpress. It works fine in Chrome, Firefox and IE9 (and pretty much also IE7). My main issue arises in IE 8 where the input fields are physically in the correct place - right next to the form labels - they're also clickable and you can enter text, but the presentational aspect for the fields appear outside of the area defined to contain all of the form elements therefore giving the impression that the text input areas aren't where they're supposed to be. Very confusing.

Here's a screenshot of the problem:

http://www.fi-testing.co.uk/wpcf7-prob/image.jpg

Here's the markup used including the shortcode for the contact form:

<aside class="grid_4 omega cf" id="footer-contact-form">

            <h6>Send us a message...</h6>

        <?php echo do_shortcode('[contact-form-7 id="134" title="Footer"]'); ?>
    </aside>

Here's my markup as set in the backend area to create the form:

<div class="cf">
   <label>Your Name*</label>[text* your-name] 
</div>

<div class="cf">
   <label>Your Email*</label>[email* your-email] 
</div>

<div class="cf">
   <label>Subject</label>[text your-subject] 
</div>

<div class="cf">
   <label>Your Message</label>[textarea your-message] 
</div>

<div class="cf">[submit class:submit "Send"]</div>

And here's the corresponding CSS (in the LESS format but still pretty clear):

#footer-contact-form{

div.cf{
    width:100%;
    input, textarea{
        float:left;
        width:200px;
        padding:5px;
        background:#eeeeee;
        border:none;
        // .inner-shadow();
        &.submit{
        .blue-button();
        margin-left:80px;
    }
    }
    label{
        float:left;
        width:60px;
        margin-right:20px;
        color:@themeprimary;
        font-size:11px;
        font-size:1.1rem;
        font-style:italic;
    }

}
}

I really can't figure out what the problem may be as it's only IE8 that throws the "visual" aspect of the form over to the right. I'm guessing that it may have something to do with the contact form 7 code that's generated from my markup but i really don't have a lot of experience with this.

Has anyone else come across this problem before either in wordpress or with forms in general?

Any help would be greatly appreciated.

Thanks,

Adam.

Answer 1

Without seeing the actual source, I would suggest adding overflow: hidden; to your .cf class. You would do this because you have 2 elements floating inside a parent div, and technically no content inside it for the .cf class to conform to.

I would also suggest cleaning up your CSS a bit.