Pure CSS PopUps tests

A few popups with CSS.

A few tests on links in different HTML elements.

Code more or less compatible with:

MSIE 5, 5.5 and 6.
Mozilla, Firefox, Galeon, Epiphany, K-meleon, Netscape 6, 7 and 8.
Opera 7, 8 and 9.
Konqueror 3.2.

MSIE 5.x and 6 only understand :hover when applied to a link.
However, if you really need :hover on another element, .htc or .hta files can modify this behavior.

In a span

popup 1 text popup 1
popup 1 text popup 1 and some text.

CSS for popup1:

li a:hover.popup1{
color:#0A00B0; /*for MSIE*/
}
li a.popup1 span.comment{
margin-left:20px;
display:none;
font-weight:800;
font-style:italic;
}
li a:hover.popup1 span.comment{
display:inline;
}

popup 1b text popup 1b
popup 1b text popup 1b and some text.

CSS for popup1b :

dt a:hover.popup1b{
color:#0A00B0;
}
dt a.popup1b span.comment{
margin-left:20px;
visibility:hidden;
font-weight:800;
font-style:italic;
background-color:#F4FBFF;
text-decoration:none;
}
html>body dt a.popup1b span.comment{
display:none;
}
dt a:hover.popup1b span.comment{
display:inline;
visibility:visible;
}

popup 2 text popup 2

popup 2 text popup 2 and some text.

CSS for popup2:

p a.popup2{
text-decoration:none;
font-weight:800;
}
p a.popup2 span.comment{
top:auto;
visibility:hidden;
text-decoration:none;
background-color:#D2E1FB;
z-index:10;
padding:0 2px;
border:1px solid #FAAAFF;
font-weight:normal;
font-size:.85em;
}
p a:hover.popup2{
color:#0A00B0;
}
p a:hover.popup2 span.comment{
visibility: visible;
}

popup 3 text popup 3

popup 3 text popup 3 and some text.

CSS for popup3 with different résults and is not supported by Konqueror:

p a.popup3{
text-decoration:none;
font-weight:800;
}
p a.popup3 span.comment{
display:none;
text-decoration:none;
background-color:#D2E1FB;
z-index:10;
padding:0 2px;
border:1px solid #FAAAFF;
font-weight:normal;
font-size:.85em;
}
html>body p a.popup3 span.comment{
position:absolute;
}
p a:hover.popup3{
color:#0A00B0;
}
p a:hover.popup3 span.comment{
display:block;
}

popup 4 text popup 4

popup 4 text popup 4 and some text.

CSS for popup4 (does not work with Netscape before version 7.02):

p a.popup4{
text-decoration:none;
font-weight:800;
}
p a.popup4 span.comment{
display:block;
visibility:hidden;
text-decoration:none;
background-color:#D2E1FB;
z-index:10;
padding:0 2px;
border:1px solid #FAAAFF;
font-weight:normal;
font-size:.85em;
}
p a:hover.popup4{
color:#0A00B0;
}
p a:hover.popup4 span.comment{
visibility:visible;
}

CSS / 3 columns / header / footer

A few popups with CSS.

In a span