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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    May 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Mouse Pointer Speed Causes CSS Hover Problem in IE 7 & 8!?

    Hello, I have quite a perplexing CSS problem that only occurs on IE 7 & 8. Explorer 6, Firefox and Chrome are not affected by this bug.


    Background:

    I have a pure CSS poplayer that works when a user rolls their mouse over a hyperlink. I have had these pure css poplayers working on the website for over a year and they work fantastic. The problem is that Iíve recently tried adding a <form> inside this poplayer, which has lead to a glitch (or css error?) that is evident only in IE 7 & 8.

    The problem almost sounds to wacky to be true, but it really only occurs when the user shakes their mouse pointer around too fast while hovered over the form in the poplayer! (Yes I know that sounds fake but itís a real, and dazzlingly frustrating problem to solve!)

    When the user is rolling over the input boxes of the form, IE will randomly lose focus and the poplayer will disappear. It is almost as if IE loses focus as the mouse travels over the form text fields, and usually only when there is text inside the input field, and and further to that only if the mouse pointer is moving rapidly!!!

    This only way to reliably replicate the problem:

    1) Roll over the link and the css poplayer will appear.

    2) Fill in the form fields with long text information

    3) Roll off the poplayer so it loses hover

    4) Hover back over link so css poplayer reappears

    5) Rapidly move the mouse over top of the form fields with text in them. It will lose focus randomly and the pop layer will keep disappearing.


    This must be some type of explorer bug, but I'm hoping that someone can help me to find a solution. The only thing that Iíve found so far is that adding padding to the css seems to make the problem happen slightly less often. Itís an extremely weird problem, and I'm hoping there is a magic CSS element that Iím missing which can help eliminate the problem.

    Iíd also like to mention that Iím trying to keep this a pure CSS poplayer. I know that I could use javascript but if at all possible I want to keep this pure CSS.

    Below is the code, and I've also uploaded the page so it can be tested at:

    hekticmedia.com/test2.htm



    [
    Code:
    ]
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <style type="text/css">
    
    .hyperLeft2{
    position: relative;
    z-index:1;
    }
    
    
    .hyperLeft2:hover{
    background-color: #E9F1F9;
    text-decoration:none;
    z-index:50;
    }
    .hyperLeft2 span{ /*CSS for enlarged image*/
    text-decoration:none;
    position: absolute;
    background-color: #E9F1F9;
    text-align:left;
    left: 20px;
    font-size: 13px;
    color: #474747;
    top: -95px;
    visibility: hidden;
    color: black;
    width: 500px;
    }
    
    
    
    .hyperLeft2:hover span{ /*CSS for enlarged image on hover*/
    visibility: visible;
    left: 20px;
    top: -95px;
    z-index:60;
    }
    
    </style>
    </head>
    
    <body>
    
    <br><br><br><br><br><br>
    
    
    
    <a href="#" class="hyperLeft2">Request a Quote<span>
    
    
      <form name="form1">
    
      <input type="text" name="name" ><br>
      <input type="text" name="custEmail" ><br>
      <input type="text" name="phone"  ><bR>
      <input type="text" name="domain" ><br>
      <input type="text" name="name2" ><br>
      <input type="text" name="custEma3il" ><br>
      <input type="text" name="phon4e"  ><bR>
      <input type="text" name="domai4n" ><br>
      <input type="submit">
      </form>
    
     </span></a>
    
    </body>
    </html>
    
    
    Thank you greatly to anyone that can help out.
    
    [
    ]

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,862
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Code:
    <a href="#" class="hyperLeft2">Request a Quote<span>
    
    
      <form name="form1">
    
      <input type="text" name="name" ><br>
      <input type="text" name="custEmail" ><br>
      <input type="text" name="phone"  ><bR>
      <input type="text" name="domain" ><br>
      <input type="text" name="name2" ><br>
      <input type="text" name="custEma3il" ><br>
      <input type="text" name="phon4e"  ><bR>
    
      <input type="text" name="domai4n" ><br>
      <input type="submit">
      </form>
    
     </span></a>
    This is completely invalid markup, see http://validator.w3.org/check?verbos...om%2Ftest2.htm

    You can't nest a form/form-element inside anchor, which is an inline element. Use a block level element to wrap the form and you'd need to use some some javascript to fix the hover issues of IE.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New to the CF scene
    Join Date
    May 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by abduraooft View Post
    This is completely invalid markup, see http://validator.w3.org/check?verbos...om%2Ftest2.htm

    You can't nest a form/form-element inside anchor, which is an inline element. Use a block level element to wrap the form and you'd need to use some some javascript to fix the hover issues of IE.

    Thank you for your response. I've fixed it so it now validates successfully. The validation was not them problem though, the issue is that IE7 & 8 randomly loses hover as the mouse moves over the input fields.

    Is there any CSS solution to this? I'm trying to find a pure CSS solution. This validates and works in every browser, except for IE7 * IE8. Can anyone tell why IE randomly loses hover as the mouse rolls over a text input field, and only if the input field has test in it, and only if the mouse cursor is moving quickly enough?

    Thank you.

  • #4
    New to the CF scene
    Join Date
    Jan 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hello,
    I had the same problem and i fixed it.
    The bug is due to the <input type="submit" />
    just change it to <input type="image" src="..." onclick="this.form.submit();"/>
    it should fix youre bug in IE.


  •  

    LinkBacks (?)


    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
    •