TJKPop Ups

Taking care of MSIE5 Mac

If you're browsing these pages with IE5 Mac, you've noticed that nothing happens when the cursor hovers over the links. It is not the nested SPANs technique that fails but the DISPLAY declaration. To make it work in IE5 Mac we need to use the VISIBILITY property instead. Unfortunately, as soon as we switch from one property to another it is IE5 Win that quits playing nicely. We can take care of that with a IE CC, easy enough.

However! There is much more to the IE5 Mac/Win madness. These 2 browsers need to be styles fed with opposite rules [that part drove me crazy]. One needs to see some declarations inside a A SPAN rule, when the other must not see any declaration attached to the anchor containing the nested SPANs that would make it look like a block element. To deal with all this stuff without taking more pills and without going with an extra style sheet [IE5 Mac specific], I decided to go with a CSS hack to hide this rule from IE5 Win.

First, I used the "voice-family" hack but I ended up with some weird results. So I went for this one and... I scored!

This solution is now working with IE5 [Win/Mac], IE6, NN6, NN7, Opera7, FireFox, Mozilla, Safari...

Check this out:

Et voilà!

Disclaimer: no JavaScript has been harmed in the making of this page.

There is hope!

Weeks after writing this article I found a much better solution to implement this technique. In fact, there is no need to use the visibility property and the CSS hack anymore. It is just a matter of overwriting rules and creating new ones for MSIE5 Mac in a separate style sheet. The icons at the top right corner of this page and the links under the TJKDesign logo take advantage of this solution.
Take a peek at this IE5Mac only Style Sheet (/css/ie5mac.css) to see how it is done.

Below are the CSS rules and HTML markup used to create the above example

CSS:

ul {
	text-align:left;
	padding:0;
	margin:0;
	z-index:1
}
li {
	display:inline;
	margin:0
}
li a {
	font-size:80%;
	color:#333;
	border:1px dotted #999;
	background:#fff;
	padding:5px
}
li a:link,li a:visited {
	text-decoration:none;
	font-weight:700
}
li a:hover,li a:active {
	font-weight:700;
	color:#fff;
	background:#ccc
}

We use this ID selector for the UL to set up a position reference for our hidden SPANs [pop ups]

#popups {position:relative}

We use the last LI [in the List menu] as a default background for the pop up area

#backpopup {
	z-index:-1;
	position:absolute;
	width:466px;
	height:100px;
	top:30px;
	left:0;
	border:1px dotted #999;
	background-color:#fff
}

This is our pop ups [images and their position] for each LI [lione, litwo, lithree, etc.]

.lione {background:url("images/10.gif") no-repeat left top}
.litwo {background:url("images/20.gif") no-repeat right top}
.lithree {background:url("images/b_70.gif") no-repeat center center}
.lifour {background:url("images/40.gif") no-repeat left bottom}
.lifive {background:url("images/50.gif") no-repeat right bottom}

We hide all the nested SPANs

#popups a span {visibility:hidden}

We reveal the SPAN inside the anchor using the pseudo class a:hover. To make them "sticky", we use :active and :focus.

#popups a:hover span,#popups a:active span,#popups a:focus span {visibility:visible !important}

This is where we position and size our pop ups [nested SPANs]
IE5 Win must not see this rule because it contains a WIDTH declaration, hence the hack

i{content:"\"/*"} /* IE5 skips the next rule */
#popups a span {
	z-index:1;
	position:absolute;
	width:466px;
	height:100px;
	top:30px;
	left:0
}
-->
</style>

It's time to take care of IE5 Win, and to do this, we use an IE CC:

<!--[if IE 5]>
<style type="text/css" media="screen">

This next rule has nothing to do with our example, it is just a classic IE5 Win fix

li a {height:1px}
#backpopup {
	z-index:-1;
	position:absolute;
	width:468px;
	top:25px;
	left:21px
}

Here we need to use "display" instead of visibility

#popups a span {display:none}

IE5 didn't see the *a span* rule so we need to declare all the properties at once:

#popups a:hover span {
	display:inline !important;
	z-index:1;
	position:absolute;
	width:468px;
	height:100px;
	top:25px;
	left:21px
}
</style>

We now close the IE CC:

<![endif]-->

HTML:

<ul id="popups">
<li><a href="#">Left Top<span class="lione"></span></a></li>
<li><a href="#">Right Top<span class="litwo"></span></a></li>
<li><a href="#">Center Center<span class="lithree"></span></a></li>
<li><a href="#">Left Bottom<span class="lifour"></span></a></li>
<li><a href="#">Right Bottom<span class="lifive"></span></a></li>
<li id="backpopup"></li></ul>