Unclickable Links

[garrensilverwing]

http://www.denverchess.com/announcements/?id=13, the likes in the announcements listed on the right are unclickable for some reason in my version of firefox (i assume its the latest version) and they also don't work in Safari. They work fine in IE 7 and IE 8 so I don't know what the problem is. Can anyone help?

[marshian]

The "Announcement" div is in front of the "OtherAnnouncements" one. Therefore, you're actually clicking the wrong element.
Give "OtherAnnouncements" a z-index of 2 and "Announcement" a z-index of 1 and it works.

[misson]

#OtherAnnouncements is behind #Announcement. Give #Announcement a non-white background color, then turn its positioning on and off in Firebug to see this. From the CSS 2.1 standard on Layered presentation (§ 9.9):

Boxes with the same stack level in a stacking context are stacked back-to-front according to document tree order.

Since both elements are positioned, they are in the same stacking context (CSS 2.1, § 9.9.1):

6. a stacking level for positioned descendants with 'z-index: auto', and any descendant stacking contexts with 'z-index: 0'.

Floats aren't normally covered up because they're in a higher stacking context:

3. a stacking level containing in-flow non-inline-level non-positioned descendants.
4. a stacking level for non-positioned floats and their contents.

Give #OtherAnnouncements a positive z-index and it will be placed in front of #Announcement.

There's still the border around #Announcement to contend with. You could put #OtherAnnouncements inside #Announcement (if that makes structural sense), or you could move the border to #BodyWrapper. In either case, set overflow on #BodyWrapper to "auto" so that it contains floated descendents.

[leafypiggy]

But: remember that z-index only works if relative (or absolute) positioning is used.

So just having the z-index property won't cut it.

Position:relative;
z-index: 2;

etc.

[marshian]

But: remember that z-index only works if relative (or absolute) positioning is used.

So just having the z-index property won't cut it.

Position:relative;
z-index: 2;

etc.

Both problematic elements are already positioned relative ;p

[garrensilverwing]

thanks, dunno why i didnt think of that :/

[leafypiggy]

I was too lazy to look. :P