Forum Moderators: not2easy
Bug - PopUp doesn't Appear in IE6
Take this sample code:
<style type="text/css">
body {
font-size: 1em;
color: #000;
background: #fff;
margin: 0;
padding: 0;
border: 0;
}
* {font-family: verdana, tahoma, arial, sans-serif;}a:link, a:visited {
position: static;
display: block;
width: 150px;
height: 20px;
text-align: right;
padding: 5px 10px;
margin: 0;
border: 1px solid #666;
text-decoration: none;
font-size: 0.8em;
color: #000;
background: #eee;
}a span {display: none;}
a:hover, a:visited:hover {
color: #f00;
}a:hover span{
display: block;
position: absolute;
top: 180px;
left: 10px;
width: 130px;
height: 30px;
padding: 10px;
margin: 0px;
color: #000;
background: #fee;
text-align: center;
}
</style>
</head>
<body>
<a href="/">Home<span>Home Description Text</span></a>
<a href="/">About<span>About Us Text</span></a>
<a href="/">Links<span>Links to Others</span></a>
<a href="/">Contact<span>Email and Postal Address</span></a>
<a href="/">Terms<span>Terms and Conditions</span></a>
</body>
</html>
The Trigger
a:hover, a:visited:hover {
color: #f00;
}
It seems that this style rule needs more!
It's probably not a very commonly triggered bug as more often than not you might be changing more that just the color in your hover declaration.
There are two ways to workaround this bug..
Method 1:
But this method may not be practical for your design, you may not want to change anything in your hover rule so:
Method 2:
I've listed properties in the second choice that won't work in my example; margin for example (I've already got that set to 0 in the :link rule, so would actually need to change the value to something else) but I left them in to show what default values you can choose from.
If anyone finds any more triggers or solutions it would be good to add them here for future reference..
Suzy
Nick
(Does IE6 recognise position:static?)
position: static, is the default position, it doesn't mean "fixed".
it is very similar to postion: relative; in that the object still appears relative to the preceeding object or element as the HTML flows but...
The difference is that with static you cannot specify top or left co-ordinates to "shift" the elements position.. and it will remain "static" in the page where it's supposed to be regardless of other relatively placed elements..
try:
p {position: relative; top: 30px; left: 30px; background: #ccc;}
p.two{position: static; background: #f00;}
HTML:
<p>paragraph one</p>
<p class="two">paragraph two</p>
<p>paragraph three</p>
This will demonstrate that the second paragraph cannot be "budged" from it's "rightful" place
then if you change relative to static in the first set of styles the page will effectively revert to the default and all paragraphs will line up again.
Suzy
