Can someone please tell me what CSS magic I need to do to make the links over on the right side of this page be clickable? (The "2006 Best of the Bay" stuff.) I thought that setting z-order:1 on .event_awards should do it but that seems to be ignored, and all of .event_blurb (the leftmost column) overlaps it as far as clicks are concerned.
7 Responses:
Setting
z-index:100andposition: relativeon .event_awards works for me.z-index doesn't apply to static-positioned elements.
(or z-index: 1, sorry, the 100 isn't necessary)
Why doesn't .event_blurb { z-index: -1; } work, since that's the thing that seems to want to grab everyone else's clicks?
It lives in the stacking context of its parent (.event_desc), which is the thing whose z-index is judged relative to its peer .event_awards. Setting z-index: -1 on .event_desc does seem to do the trick, but breaks links in that section, since they're now overlapped by something else.
Agreed. I used the Web Developer Toolkit in Firefox to edit the CSS to add only this:
.event_awards { position: relative; z-index: 1; }Experimentation showed that the real problem is to do with the float:right on that element. I've seen it before, and only careful juggling of floats and position:relative or position:absolute could fix it.
z-index is a code smell, but CSS makes it unavoidable once you're down a particular path.
The problem stems from .event_desc being positioned relative. Take that out and your link problem is fixed. Then go to .event_lineup and remove the left:0 and the layout is fixed.
Moving
.event_awardsso that it sits inside of.event_desc descriptionworks for me:<div class="event_desc description">
` <div class="event_awards">...</div>
` <div class="event_lineup">...</div>
` ...
</div>