31
Jan
Learned and Web Discussion. |
So I attached the “beta” tag to the Loladex logo (improving all the time, add it to FB at Loladex.com! Plug plug plug!) by just sticking it in the same image. But the image had to be one link, and the tag another, so I figured I’d just absolute-position a block link over the spot and negative-text-indent the “what’s beta?” text out into the stratosphere.
One problem: IE and IE7 (perhaps rightly) didn’t think an empty block with no content, no background, and no effects counted as a link. The easy solution was to add a background image and position it out of the block’s “frame,” but I bet there’s a less hacky way to do it.
I don’t know if this is the same kind of scenario, but for a blog I was working on a few months back, they wanted the big banner image to link to one thing and some HTML type layered on *top* of the image (since removed) to link to something else.
#banner { width: 624px; height: 125px; background: url(’http://media.washingtonpost.com/wp-srv/politics/interactives/factchecker/factchecker_banner.gif’) no-repeat top center; }
#banner h1 { margin: 0; position: relative; }
#banner h1 a { display: block; width: 100%; height: 72px; }
#banner h1 span { display: block; position: relative; text-indent: -999px; }
The Fact-Checker
The <A> is a block link that’s positioned right over the title text, and the span inside negative-indents the text inside.
It’s kind of hacky, too — the <SPAN> is structurally unnecessary — but it did the job and worked on the browsers I tested with.
Hmmm … that PRE didn’t work. Ah well.
Weird, so adding that element made it behave properly as a link? Interesting.