Html – Clickable sIFR inside linked elements

flashhtmlsifr

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?

Best Answer

The link has to be inside the Flash movie for it to work reliably — that is, if you replace an h2, the a must be inside that h2.