homepage Welcome to WebmasterWorld Guest from 54.211.73.232
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Pure CSS Popups - IE6 Bug
explanation and workarounds
SuzyUK

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



 
Msg#: 1189 posted 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;
}
</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

 

Nick_W

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



 
Msg#: 1189 posted 3:40 pm on Jun 9, 2003 (gmt 0)

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

Nick

DrDoc

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



 
Msg#: 1189 posted 7:01 am on Jun 10, 2003 (gmt 0)

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

Hester

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 1189 posted 1:05 pm on Jun 10, 2003 (gmt 0)

Excellent presentation Suzy!

(Does IE6 recognise position:static?)

drbrain

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 1189 posted 4:55 pm on Jun 10, 2003 (gmt 0)

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

Hester

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 1189 posted 8:24 am on Jun 11, 2003 (gmt 0)

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

SuzyUK

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



 
Msg#: 1189 posted 2:24 pm on Jun 11, 2003 (gmt 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

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