Welcome to WebmasterWorld Guest from 54.204.198.71

Forum Moderators: not2easy

Message Too Old, No Replies

Pure CSS Popups - IE6 Bug

explanation and workarounds

     
1:44 pm on Jun 9, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Oct 1, 2002
posts:5199
votes: 0


There seems to be a bug in IE6(!) that's triggered when creating "Pure CSS Popups" using Eric Meyer's "<span> technique".

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:

  • Take any one style rule from the a:link, a:visited rule and change it slightly. Then declare it in the a:hover rule.
  • The exception to this rule is color otherwise the bug probably wouldn't trigger.
  • parts of shorthand properties will do: i.e. border: 1px solid #000; can be changed by just putting border-color: #001; into the hover rule.

But this method may not be practical for your design, you may not want to change anything in your hover rule so:

Method 2:

  • Take a property that hasn't been declared in your a:link, a:visited rule and declare it's Default/Initial Value in the hover rule instead..
  • There are exceptions with this too. Exceptions being mainly the CSS2 properties*. So sticking with CSS1 properties would be safest.
  • Examples that I have tested as "Good to Go"..:
  • direction: ltr;
  • display: inline;
  • float: none;
  • position: static;
  • border: 0;
  • clear: both; /* default for this is none; but on a block item it's both */
  • height: auto;
  • margin: 0;
  • padding: 0;
  • list-style-type: disc;
  • list-style-position: outside;
  • text-align: left;
  • text-indent: 0;
  • vertical-align: baseline;
  • white-space: normal;
  • overflow: visible;
  • visibility: inherit;
  • *(CSS2 exception) [bottom][top][left][right]: auto;

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

3:40 pm on June 9, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member nick_w is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Feb 4, 2002
posts:5044
votes: 0


That's an outstanding piece of work Suzy, thanks for posting it ;)

Nick

7:01 am on June 10, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member drdoc is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Mar 15, 2002
posts:6807
votes: 0


Whoa! Now that's a very nice post, Suzy! :)
1:05 pm on June 10, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Dec 5, 2002
posts:1318
votes: 0


Excellent presentation Suzy!

(Does IE6 recognise position:static?)

4:55 pm on June 10, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Apr 18, 2003
posts:827
votes: 0


It should, static is the initial value for the position property.
8:24 am on June 11, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Dec 5, 2002
posts:1318
votes: 0


How does static differ from fixed (which IE doesn't support)?
2:24 pm on June 11, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Oct 1, 2002
posts:5199
votes: 0


hester

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