IE7 / 8 Compatibility mode TABLE / CSS / FORM issue

Posted on 2009-06-29
Medium Priority
Last Modified: 2012-05-07
You need (ideally) IE7 or 8 (the one I am using) to see this rather bizarre issue.

Go to www.pinkanddizzy.com and click on registration (there is NO need to register any details to see this issue). This webworks best in IE6, as the menu to the left displays properly in this browser. However in IE7 and 8 the menu is .. well broken.

However, when in compatibility mode, it is not possible to click inside the first half of the forms in the registration form. See for youself.. visit the site using IE8 without compatibility mode.. click registration then click inside the field FIRST NAME... easy...

now click the compatibilty mode button (watch the menu now display correctly..) now try to click anywhere in the first HALF of the FIRSTNAME box.. you cant... move the mouspointer along the field.. and after about half way the cursor changes to the text one.

Any ideas welcome.. there is no major java or codnig at work in this very basic form.
Question by:mvwmail
LVL 30

Accepted Solution

IanTh earned 1500 total points
ID: 24740545
I think its because your using tables
dont ie 7 and 8 dont like them

I use on forms

<form action="sendmail.php" method="post" name="form1" class="form">
      <fieldset class="fieldset">
        <input name="form:" type="hidden" id="hidden Field" value="contact us" />
        <span id="sprytextfield1">
        <label for="name" class="label">Name</label>
        <input type="text" name="name" class="field" id="name" />
        <span class="textfieldRequiredMsg">A value is required.</span></span><br />
        <span id="sprytextfield2">
        <label for="email address" class="label">Email Address</label>
        <input type="text" name="email address" class="field" id="email address" />
        <span class="textfieldInvalidFormatMsg">Invalid email address.</span></span><br />
        <span id="sprytextfield3">
        <label for="phone number" class="label">Phone Number</label>
        <input type="text" name="phone number" class="field" id="phone number" />
        <span class="textfieldRequiredMsg">A value is required.</span></span><br />
        <span id="sprytextarea1">
        <label for="message" class="label">Message</label>
        <textarea name="message"  class="field" id="message" cols="45" rows="5"></textarea>
        <span class="textareaRequiredMsg">A value is required.</span></span> <br />
          <label for="submit"></label>
          <input name="submit" type="submit" class="button" id="submit" value="Submit" />
          <label for="reset"></label>
          <input name="reset" type="submit" class="button" id="reset" value="Reset" />
          <br />

and it works in ie 7 and 8 no problem

Author Closing Comment

ID: 31598074
Taking the form out of the table didnt work.. I got around the issue by just using one column instead of two.

Thanks for trying anyway

Featured Post

Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Introduction This article is intended for those who are new to PHP error handling (https://www.experts-exchange.com/articles/11769/And-by-the-way-I-am-New-to-PHP.html).  It addresses one of the most common problems that plague beginning PHP develop…
This holiday season, we’re giving away the gift of knowledge—tech knowledge, that is. Keep reading to see what hacks, tips, and trends we have wrapped and waiting for you under the tree.
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…

624 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question