IE 8 image-based BG anchor issue

Ordinary link fails as a link - only in IE 8.

[rocknbil]

Well. Just when you thought you've seen everything. :-)

The problem: In every other browser - including IE 9 beta - this image based block anchor works fine.

IE 8, and only IE 8, doesn't recognize it as an anchor. The cursor changes from cursor to arrow when mousing over it, but the hover states don't work and it doesn't navigate. This is with the header navigation using the same methods on the same page just fine.

Remove the CSS and let it live as a plain text link, it's fine.

The environment:

Page is 100% validated HTML 4.01 strict.

Firebug shows no overlying elements interfering with the abberation.

No absolute positioning or conditionals - straight HTML and CSS, using floats and semantic elements.

The HTML:
<div id="left-content">
<div id="careers-left"></div> <!-- left-floated 300 X 500 background image -->

<div id="careers-right"> <!-- left-floated 300 px container, which actually is in the middle column -->

<!-- Some "ordinary content" here
a head, a list, a paragraph
-->

<p id="careers-started"><a href="link-to-page">Get Started Here!</a></p> <!-- this is the problem -->

</div> <!-- end of the container -->

<!-- a right column follows here, also left-floated -->

The relevant CSS: (Firebug shows no other elements interfering with it except the page font assignment in body)

#careers-started,#careers-started a { display:block; width:163px; height:30px; }
#careers-started { margin: 24px 0 24px 80px; padding:0; }
#careers-started a { background:url(/images/get-started-button.gif) top left no-repeat; text-indent:-50000px; outline:none; cursor:pointer; }
#careers-started a:hover { background-position:bottom left; }

What I've tried:
- This started out as a paragraph with text-align: center (which probably conflicted with the text-indent on the a) so I messed with margins, which left me at what you see above.
- Searched and searched, found nothing helpful.
- Removed the text-indent completely, thinking it was throwing the whole anchor off page. No luck.
- added position relative, has Layout, and a couple other worthless hoo-doo's (that only Internet Destroyer loves) to the parent container, no help.

[alt131]

Hi rocknbil, not what you want to hear, but the provided code is working as described for ie8 here. The only change was to comment out cursor:pointer to observe the default effect

Then checked a few cosmetics: Used a place-holder graphic, commented out outline:none to check the exact size of the <a>, and set overflow:hidden to stop the outline extending -50000px. But as expected, still working.

Didn't construct any of the floats though, and this is quite interesting. If you havem't yet traced the cause would you like to put up more code?

[rocknbil]

I think it may be a user-computer problem, I wouldn't have believed it if I wasn't able to walk over and look at it on her screen. The above is most of what there is to it. I'm using the "shrink wrap" approach, the CSS is rather excessive due to silly shadows right and left, etc. It's basically a fixed witdh margin: auto outer, and everything inside floated left (inner container, the columns mentioned above.) Then on this page only, there's two more inner columns, shown above, also floated left.

It's a bit baffling, there are other links on the page and when I set it to a plain link, it's fine.

[alt131]

Baffling ... I agree. Couldn't reproduce it at all, even with the rest of the styling. So knowing you will have thought about this already, sometimes hearing someone else say it triggers an idea:

#Does the stripped test case (posted here) fail as well?
#Does it fail when keyboarding?
#Does setting :active/:focus make a difference?
#Does it fail with no background (image or color)
#Does haslayout true/false make a difference?
#What's the minimum combination of styles (least invasive to most) to trigger?
#Does it fail with a different graphic? (Personal experience with a graphic that only affected my box - a fresh image flew.)

I'm real suspicious about the failure to extend the box to accommodate the text-indent, and parts of these layout specs trigger bugs that reduce a link to zero dimensions. In those cases the developer bar will sometimes report the computed zero dimensions, and sometimes the (default colour) blue outline identifying the selected element will give a clue. Are they providing any information?

Finally, does it also fail if width/height are explicitly set on the <a> and <p> - including explicitly setting block and dimensions on the link states as well?