Hallo all,
I’ve got a situation where I couldn’t use the usual solutions (yeah including the Become a white water rafting tour guide solution). I’m kinda hoping just typing this out will do the trick for me, and if not, I hit Submit.
I’ve got a rel-po’d ul with abso-pod’ anchors (this is redo of one of my CSS maps… now it’s usable without images! yay).
The anchors are positioned over the individual clickable parts of the map.
Each anchor has two abso-po’d elements inside it: an empty b who holds the slidy part of the image, and a span holding the anchor text. I’m sure if I think about it, I can lose one element, but the old design has the spans offscreen and they come onscreen like a label on hover/focus. So I couldn’t find a good way to move the text individually from the anchor itself without this wrapping span.
Anyway, the b is positioned at a higher z-index (50) than the spans (5), keeping the image held by the b’s above the spans and hiding the text. No image, the spans just show as they should. Yay.
When the anchors get hovered or focussed, the z-index of the span goes up to 100, making it appear. Also gets a change of background colour to help those with CSS on but no images. I think I got the idea of switching z-indeces from Eric Watson. Works in Opera and IE7 (haven’t checked 8 yet but expect it to work).
IE7 needed the z-index increased on teh anchors themselves upon :hover (though the goal was to raise the z-index of the b’s alone, so other b’s can’t overlay the hover sections of the map), which would be the main IE z-index bug, but nothing so far as worked for IE6.
IE6 keeps the span under the b’s, and after a single round of hovering, keeps the spans above (except during hovering). So I see the :hover is triggering something, and tried explicitly setting low z-indeces on the b while raising on the span, tried changing the source order of span and b (moved the b’s to later in source, didn’t matter), tried the visibility trigger on the a:hover in case that was it…
General idea:
<ul id="kaart">
...bunch of links like this one
<li><a id="oz" href="foo"><span>Oceanië</span><b></b></a></li>
</ul>
CSS
#kaart {
position: relative;
width: 600px;
height: 340px;
margin-left: 10px;
}
#kaart li {
display: inline;
}
#kaart a, #kaart a b, #kaart a span {
position: absolute;
text-decoration: none;
}
#kaart a b {
left: 0;
top: 0;
width: 100%;
height: 100%;
background: url(../../images/kaartshr.png) 0 0 no-repeat;
z-index: 50;
}
/*voor de "b" maar IE wil op de parent*/
#kaart a:focus, #kaart a:hover {z-index: 52;}
#kaart a span {
left: 40%;
top: 40%;
padding: 2px 5px;
color: #000;
font: .8em/1em baskerville, georgia, "times new roman", serif;
text-align: center;
white-space: nowrap;
border: 1px solid #000;
z-index: 5;
}
#kaart a:focus span, #kaart a:hover span {
background-color: #fbeb92;
z-index: 100;
}
...
#oz {
left: 466px;
top: 217px;
width: 112px;
height: 102px;
}
a#oz b {
background-position: -466px -217px;
}
#oz:hover b, #oz:focus b {
background-position: -600px -200px;
}
tried also
#kaart a {z-index: 1;}/also tried very very high z-index/
- html #kaart a:hover {visibility: visible;}/just in case/
I tried setting a transparent background-color on the span beforehand, in case adding it on :hover/focus was setting it off.
If the span and b weren’t being abso-po’d, I prolly would have blocked and margin-positioned the anchors instead.
Anyway, I’m pretty sure some combination I didn’t think of could fix this. If not, the map’s ugly but optional, and IE6 users just get weirdness (they could also still use it, I guess). However we have a good % of them, so ideally I’d like to know what I’m screwing up here. While I’m sure it’s a z-index bug, the “triggering” happening on the first hover after refresh suggests also a state bug.
