Tag error: <txp:tru_tags_if_has_tags> ->  Textpattern Warning: tag does not exist while_parsing_page_form: archive, default
/commentable: IE9 & Nested links - Ignores buttons
Dinarius = digital interest
29 February 2012

IE9 & Nested links - Ignores buttons

Internet Explorer 9 is great for developers who want everyone to see curved borders and various transparencies, but not so great for some links that don’t work in IE9 that did work in everything else. Java has been blamed, WYSIWYG editors blamed and Microsoft’s answers amount to nothing more than blaming add-ons. The common bond for problems I’ve seen: Nested links in web pages.

IE9 cannot open certain links because it cannot, for some reason, detect that there’s a link to be opened. The, “for some reason,” is a HUGE code mistake somewhere inside the browser source that’s way above my pay grade… But if you’re designing a site and want IE9 users to be able to access everything, like FSC Envestnet services online (financial adviser software) then you need to get your links OUT of any deep nesting.

IE9 cannot see some links in a webpage
Bottom-right: mini screenshot. Top-ish: Actual FOOTER DIV with Button beside Text Links that IE9 does recognize. IE9 F12 Developer Tools DO NOT register that “Remote Desktop Assistance” is an HREF link, not just plain text.

Nesting an element in CSS is pretty easy and it’s pretty common. It’s done to make things pretty. A page with a DIV with a CONTAINER with a TABLE with a BUTTON with a LINK. We say that link is nested (I do, actually). I might be using the term, nested elements, wrong, but the idea is right.

Here’s a simple enough link flow: DIV FOOTER to a TABLE to a ROW to Table DATA with a TEXT LINK. IE9 can see that there is a link there.

Here’s a simple enough variation: DIV FOOTER to a TABLE to a ROW to Table DATA with a BUTTON containing a TEXT LINK. IE9 stops reading or parsing at that button. It’s blind to the link.

Chrome reveals the text link
Meanwhile, Chrome sees that there is a valid LINK in the Button element.

Something about IE9 causes it to stop reading in a case exactly like the one pictured. JavaScript nests all sorts of drop down menu links and hidden links to make the GUI cleaner and more interesting. I just put a text link in a big button to make it easy to find. Now the people who need the most help with Remote Assistance can’t click the button to get the help. Right-clicking doesn’t help either; since IE9 won’t click some links, it won’t give the normal Context Menu options. See below Chrome vs IE9

IE9 context menu shows no link when nested
The Right-click, Context Menu in Chrome & IE9. IE9 registers NO link.

Favorite's the ARTICLE, not the SITE.