[RESOLVED] Absolutely Position Anchor Over Text Nodes in IE7/8

[aj_nsc]

Here's my HTML:


<ul>
<li class="user"><a title="Click to display logged events for this session" href="#">&nbsp;</a>stuff here</li>
<li class="time">stuff here</li>
<li class="time">stuff here</li>
<li class="ip">stuff here</li>
</ul>


and the relevant CSS:


ul { position: relative; }
ul a { position: absolute; display: block; width: 100%; height: 100%; z-index: 10; }


All the LI's are floated left to make a row (not shown in the CSS) and I want to make the entire row clickable so I figured I'd absolutely position an anchor which is the entire width and height of the row....works great in FF, Opera, Safari, and Chrome. But in IE7/8, the entire row is clickable except for the text nodes ("stuff here").

I realize there's no real point for the z-index declaration in the above css, but I was just trying random things at the point when I came up with it - it never helped. Does anyone know how to achieve this effect without putting the content in each li in separate <a> tags in addition to my absolutely positioned anchor?

[crh3675]

Put a background color on the <a> tag. I know it will hide your text but see if it works when there is a background.

[aj_nsc]

How much do I owe you crh3675? I saw a mention of this workaround online, but I thought it was the same as "add a border to the anchor"....and when I did that, I saw no difference, but background color does do something different.

So the workaround was:


ul a { position: absolute; display: block; width: 100%; height: 100%; background-color: #fff filter: alpha(opacity=0); }


and bingo!

Thanks a lot!

[mattalexx]

But why?? I have the same problem. I add a background and the problem goes away. But keeping the background there isn't possible because there's content underneath.

Wish you had gone into more depth two years ago, crh3675.

[aj_nsc]

mattalexx, I have good news for you, it's not two years ago!! ;) The only reason I did it this way was to keep my HTML valid....HTML4 did not allow anchor tags around block level elements.

HOWEVER, HTML5 does allow it!! Meaning the following is perfectly valid:


<a href="#">
<div>
<h1>Click Me!</h1>
<p>And all the gloriousness of HTML5 will shine through.....</p>
</div>
</a>

[mattalexx]

Yes, I know. I never figured out the real problem but I know it has something to do with position: absolute, backgrounds, and :hover.

Thanks

[aj_nsc]

Oh, if this is for learning sake, I'd move on, it was a bug in the CSS spec implementation of IE7/8.