Hi guys,

 

Was wondering if anyone could help me...

 

I'm trying to do a quick mock-up of a site using Wordpress (Thesis theme).

 

Bascially, everything is ok except for a contact form I have inserted into the footer.

 

The design is here: http://www.invisibleinkwebdesigns.com/ilccomms

 

There are a couple of problems...

 

Firstly, the layout is all weird in IE8 (but fine in Firefox and Safari, etc.). It's like a load of margin/padding has been inserted into the form so the field boxes are too spaced apart.

 

Secondly, the little "(required)" and "(valid email required)" pieces of text shouldn't be displaying between the boxes. They're contained in a span class, which I have set display: none; to in the css. I'm confused about why they're still displaying, despite me doing that.

 

Basically, the code looks like this:

 

<div id="contactform">
   <h3 id="quickcontactform">Quick Contact</h3>
   <div id="usermessagea" class="cf_info "></div>
   <form enctype="multipart/form-data" action="/ilccomms/#usermessagea" method="post" class="cform" id="cformsform">
       <fieldset class="cf-fs1">
           <legend>Quick Contact</legend>
           <ol class="cf-ol">
               <li id="li--2" class="">
                   <label for="cf_field_2">
                       <span>Your Name (required)</span>
                   </label>
                   <input type="text" name="cf_field_2" id="cf_field_2" class="single fldrequired" value="Your Name (required)" onfocus="clearField(this)" onblur="setField(this)"/>
                   <span class="reqtxt">(required)</span>
               </li>
	<li...... etc. etc.

 

As you can see, the "(required)" piece of text is in a span class, which I have styled using:

 

#cformsform legend, #cformsform label, span.emailreqtxt, span.reqtxt {
   display: none;
}

 

But IE seems to still display it!

 

ANY help would be greatly appreciated!!

 

Firstly, the layout is all weird in IE8 (but fine in Firefox and Safari, etc.). It's like a load of margin/padding has been inserted into the form so the field boxes are too spaced apart.

 

Check out:

 

Markup errors

 

Your code is causing IE8 to display in IE7 standards mode, and the errors cascade to your contact form.

tinimic, thank you VERY much - never even bothered to validate it, what a fool!! Haha.

 

Thanks again, very helpful!

Ok, page now validates as transitional xhtml but it's made precisely zero difference to the layout of the contact form.

 

Any ideas anyone?

Ok, no worries - I think it was something to do with the css code supplied with the plugin, so I've disabled it and coded it all myself...

 

Fingers crossed.