hektic
May 6th, 2010, 10:45 PM
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
[
]
<!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.
[]
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
[
]
<!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.
[]