I am seeing strange results in Internet Explorer 6 for windows when I use generate CSS rollovers using background-image repositioning, and I position these elements with css. Things work fine in Firefox and Opera, but in IE the hover state persists even after the pointer is moved off of the image, except under three conditions:
1) the pointer is moved over another anchor on the page, activating a hover state elsewhere;
2) the ponter is moved off the anchor and the mouse is clicked to give another element on the page focus. clicking on empty space does nothing.
3) moving the mouse anywhere immediately to the right of the second of two anchor/rollovers.
This seems to have something to do with the way I am using css positioning. I ran into the same problem when I used absolute positioning. But things behave differently when I use the identical css rollover scheme in a div that is not positioned via css -- but they still don't behave the way they should.
Has anyone out there seen this before? This css rollover scheme has worked for me before, when I wasn't using any css positioning on the page. Do you have any ideas if/why combining them with some css positioning is messing things up?
You can see the bug/faulty code in action for yourself here:
<!-- m --><a class="postlink" href="http://www.tarado.com/test.html">http://www.tarado.com/test.html</a><!-- m -->
And you can see the actual code here:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>the title</title>
<style type="text/css" media="screen">
html {
min-width: 800px;
}
body {
position: relative;
font-family: Sans;
font-size: 2px;
}
#home {
background-color: navy;
padding-left: 50%;
width: 49%;
}
#home #contents {
width: 300px;
margin-left: -300px;
padding-left: 300px;
border: 1px solid red;
}
#home #contents #links {
width: 380px;
height: 120px;
margin-left: -190px;
border: 1px solid orange;
}
#home #contents #links2 {
border: 1px solid yellow;
}
#home #contents #links #A {
position: relative;
left: 35px;
}
#home #contents #links #B {
position: relative;
left: 68px;
}
a#A img {
width: 139px; height: 27px; border-width: 0; background: top left no-repeat; margin:0px;
background: url(<!-- m --><a class="postlink" href="http://www.instinctual.com/images/util/test_roll.jpg">http://www.instinctual.com/images/util/test_roll.jpg</a><!-- m -->) no-repeat 0% -0px;
}
a#A:hover img {
background-position: 0% -27px;
}
a#B img {
width: 139px; height: 27px; border-width: 0; background: top left no-repeat; margin:0px;
background: url(<!-- m --><a class="postlink" href="http://www.instinctual.com/images/util/test_roll.jpg">http://www.instinctual.com/images/util/test_roll.jpg</a><!-- m -->) no-repeat 0% -0px;
}
a#B:hover img {
background-position: 0% -27px;
}
a#C img {
width: 139px; height: 27px; border-width: 0; background: top left no-repeat; margin:0px;
background: url(<!-- m --><a class="postlink" href="http://www.instinctual.com/images/util/test_roll.jpg">http://www.instinctual.com/images/util/test_roll.jpg</a><!-- m -->) no-repeat 0% -0px;
}
a#C:hover img {
background-position: 0% -27px;
}
a#D img {
width: 139px; height: 27px; border-width: 0; background: top left no-repeat; margin:0px;
background: url(<!-- m --><a class="postlink" href="http://www.instinctual.com/images/util/test_roll.jpg">http://www.instinctual.com/images/util/test_roll.jpg</a><!-- m -->) no-repeat 0% -0px;
}
a#D:hover img {
background-position: 0% -27px;
}
</style>
</head>
<body id="home">
<div id="contents">
<div id="links">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.w3c.org" id="A" title="the title">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"/images/spacer.gif" width="139" height="27" alt="the alt text"></a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.w4c.org" id="B" title="the title">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"/images/spacer.gif" width="139" height="27" alt="the alt text"></a>
</div>
<div id="links2">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.w3c.org" id="C" title="the title">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"/images/spacer.gif" width="139" height="27" alt="the alt text"></a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.w4c.org" id="D" title="the title">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"/images/spacer.gif" width="139" height="27" alt="the alt text"></a>
</div>
</div>
</body>
</html>
Thanks very much for your assistance!Something like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>image rollover</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
<!--
* {
margin:0;
border:0;
}
html {
min-width: 800px;
}
body {
font-family: Sans;
font-size: 2px; /* very small */
background-color: navy;
margin:0 20%;
}
#contents {
border: 1px solid red;
}
#links {
width: 380px;
height: 120px;
margin:0 auto;
border: 1px solid orange;
}
#links2 {
margin-left:50%;
width:50%;
height:27px;
border: 1px solid yellow;
}
li a {
display:block;
width:139px;
height:27px;
}
#A {background: url(../Images/a.jpg) no-repeat 0 0;
}
#B {background: url(../Images/b.jpg) no-repeat 0 0;
}
#C {background: url(../Images/c.jpg) no-repeat 0 0;
}
#D {background: url(../Images/d.jpg) no-repeat 0 0;
}
a#A:hover, a#B:hover, a#C:hover, a#D:hover {
background-position: 0 -27px;
}
ul {
padding:0;
list-style: none;
}
li {
float:left;
}
-->
</style>
</head>
<body id="home">
<div id="contents">
<ul id="links">
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.w3c.org" id="A" title="the title"></a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.w4c.org" id="B" title="the title"></a></li>
</ul>
<ul id="links2">
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.w3c.org" id="C" title="the title"></a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.w4c.org" id="D" title="the title"></a></li>
</ul>
</div>
</body>
</html>
1) the pointer is moved over another anchor on the page, activating a hover state elsewhere;
2) the ponter is moved off the anchor and the mouse is clicked to give another element on the page focus. clicking on empty space does nothing.
3) moving the mouse anywhere immediately to the right of the second of two anchor/rollovers.
This seems to have something to do with the way I am using css positioning. I ran into the same problem when I used absolute positioning. But things behave differently when I use the identical css rollover scheme in a div that is not positioned via css -- but they still don't behave the way they should.
Has anyone out there seen this before? This css rollover scheme has worked for me before, when I wasn't using any css positioning on the page. Do you have any ideas if/why combining them with some css positioning is messing things up?
You can see the bug/faulty code in action for yourself here:
<!-- m --><a class="postlink" href="http://www.tarado.com/test.html">http://www.tarado.com/test.html</a><!-- m -->
And you can see the actual code here:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>the title</title>
<style type="text/css" media="screen">
html {
min-width: 800px;
}
body {
position: relative;
font-family: Sans;
font-size: 2px;
}
#home {
background-color: navy;
padding-left: 50%;
width: 49%;
}
#home #contents {
width: 300px;
margin-left: -300px;
padding-left: 300px;
border: 1px solid red;
}
#home #contents #links {
width: 380px;
height: 120px;
margin-left: -190px;
border: 1px solid orange;
}
#home #contents #links2 {
border: 1px solid yellow;
}
#home #contents #links #A {
position: relative;
left: 35px;
}
#home #contents #links #B {
position: relative;
left: 68px;
}
a#A img {
width: 139px; height: 27px; border-width: 0; background: top left no-repeat; margin:0px;
background: url(<!-- m --><a class="postlink" href="http://www.instinctual.com/images/util/test_roll.jpg">http://www.instinctual.com/images/util/test_roll.jpg</a><!-- m -->) no-repeat 0% -0px;
}
a#A:hover img {
background-position: 0% -27px;
}
a#B img {
width: 139px; height: 27px; border-width: 0; background: top left no-repeat; margin:0px;
background: url(<!-- m --><a class="postlink" href="http://www.instinctual.com/images/util/test_roll.jpg">http://www.instinctual.com/images/util/test_roll.jpg</a><!-- m -->) no-repeat 0% -0px;
}
a#B:hover img {
background-position: 0% -27px;
}
a#C img {
width: 139px; height: 27px; border-width: 0; background: top left no-repeat; margin:0px;
background: url(<!-- m --><a class="postlink" href="http://www.instinctual.com/images/util/test_roll.jpg">http://www.instinctual.com/images/util/test_roll.jpg</a><!-- m -->) no-repeat 0% -0px;
}
a#C:hover img {
background-position: 0% -27px;
}
a#D img {
width: 139px; height: 27px; border-width: 0; background: top left no-repeat; margin:0px;
background: url(<!-- m --><a class="postlink" href="http://www.instinctual.com/images/util/test_roll.jpg">http://www.instinctual.com/images/util/test_roll.jpg</a><!-- m -->) no-repeat 0% -0px;
}
a#D:hover img {
background-position: 0% -27px;
}
</style>
</head>
<body id="home">
<div id="contents">
<div id="links">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.w3c.org" id="A" title="the title">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"/images/spacer.gif" width="139" height="27" alt="the alt text"></a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.w4c.org" id="B" title="the title">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"/images/spacer.gif" width="139" height="27" alt="the alt text"></a>
</div>
<div id="links2">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.w3c.org" id="C" title="the title">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"/images/spacer.gif" width="139" height="27" alt="the alt text"></a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.w4c.org" id="D" title="the title">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"/images/spacer.gif" width="139" height="27" alt="the alt text"></a>
</div>
</div>
</body>
</html>
Thanks very much for your assistance!Something like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>image rollover</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
<!--
* {
margin:0;
border:0;
}
html {
min-width: 800px;
}
body {
font-family: Sans;
font-size: 2px; /* very small */
background-color: navy;
margin:0 20%;
}
#contents {
border: 1px solid red;
}
#links {
width: 380px;
height: 120px;
margin:0 auto;
border: 1px solid orange;
}
#links2 {
margin-left:50%;
width:50%;
height:27px;
border: 1px solid yellow;
}
li a {
display:block;
width:139px;
height:27px;
}
#A {background: url(../Images/a.jpg) no-repeat 0 0;
}
#B {background: url(../Images/b.jpg) no-repeat 0 0;
}
#C {background: url(../Images/c.jpg) no-repeat 0 0;
}
#D {background: url(../Images/d.jpg) no-repeat 0 0;
}
a#A:hover, a#B:hover, a#C:hover, a#D:hover {
background-position: 0 -27px;
}
ul {
padding:0;
list-style: none;
}
li {
float:left;
}
-->
</style>
</head>
<body id="home">
<div id="contents">
<ul id="links">
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.w3c.org" id="A" title="the title"></a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.w4c.org" id="B" title="the title"></a></li>
</ul>
<ul id="links2">
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.w3c.org" id="C" title="the title"></a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.w4c.org" id="D" title="the title"></a></li>
</ul>
</div>
</body>
</html>