[css-d] Hover bug with IE6/IE7 and forms?

[Richmond]

Hi everyone.

I have an issue with a form on an HTML page. My best guess is that
it's a variant of the Guillotine bug, or that the form is somehow
inheriting margin or padding properties from an ancestor element...
but I can't be sure.

On the following page:
http://www.canopydesign.ca/webdev/leadingedge/seminars/Affect-Regulation4.html

...there's an email list sign-up form on the left menu (in red).
When hovering over any of the INPUT fields in IE6 or IE7, the fields
(even the GO button) are obscured by white and don't reappear until
the user mouses somewhere else on the page (especially over an <a>
link).

Any ideas?

Thanks,
Rich.

Here's the code for the form and its container:

     <div id="left">
       <div class="navcontainer">
         <ul id="nav3">
               <li id="email_signup">
                       <form action="" method="post">
                               <input name="email" id="email"
type="text" value="Email address" class="text"
onfocus="this.value=''"/>
                               <input name="firstname" id="firstname"
type="text" value="First Name" class="text" onfocus="this.value=''"/>
                               <input name="lastname" id="lastname"
type="text" value="Last Name" class="text" onfocus="this.value=''"/>
                               <input type="image" name="submit"
src="../images/master/button_go.gif" class="formButton" />
                       </form>
                       </li>
                       </ul>
       </div>
       </div>

...and the relevant CSS:

#left {
       float:left;
       width:165px;
       margin-left:-165px;
       position:relative;
       height: 436px;
       }

#navcontainer {
       margin: 0;
       padding: 0;
       }

ul#nav3 {
       display:block;
       position: relative;
       width: 150px;
       height: 120px;
       margin: 7px 7px -3px;
       padding: 0;
       list-style-type: none;
       background-image: url(../images/master/email_signup.gif);
       background-repeat: no-repeat;
       background-color: #e65e6a;
}

form {
       margin: 0;
       padding: 24px 0 0 0;
       }

input {
       margin: 0 0 7px 4px;
       padding: 2px;
       color: #666;
       width:90px;
       }

input.formButton {
       margin: 0 0 0 2px;
       width: auto;
       background-color: #e65e6a;
       }
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/