Question

My site in progress has some large graphical buttons that uses sIFR to display their headings. The structure looks like this:

<a href="link.to.somewhere">
  <div class="topGfx"></div>
  <div class="content">
    <h2>Heading goes here</h2>
    <p>Content goes here</p>
  <div class="bottomGfx"></div>
</a>

I’m replacing the <h2> element with sIFR 3, revision 436.

Everything works great until I activate sIFR. The font is replaced just fine, but the heading can no longer be clicked even though the rest of the button can. I tried to add another <a> inside the <h2> heading but that broke the whole layout since multiple <a> tags can’t be nested.

Is there a “correct” way to fix this or should I work around it with something ugly like a z-indexed clickable blank.gif on top of the whole thing? Or is there something else wrong that I’ve missed?

Answer 1

After lots of experimenting, I found out that setting sIFR’s wmode to transparent lets the clicks fall through to the containing element.