homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

Pure CSS Popups - IE6 Bug
explanation and workarounds

 1:44 pm on Jun 9, 2003 (gmt 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;
<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>

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..




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

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



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

Whoa! Now that's a very nice post, Suzy! :)


 1:05 pm on Jun 10, 2003 (gmt 0)

Excellent presentation Suzy!

(Does IE6 recognise position:static?)


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

It should, static is the initial value for the position property.


 8:24 am on Jun 11, 2003 (gmt 0)

How does static differ from fixed (which IE doesn't support)?


 2:24 pm on Jun 11, 2003 (gmt 0)


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..

p {position: relative; top: 30px; left: 30px; background: #ccc;}
p.two{position: static; background: #f00;}

<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.


Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved