Since yesterday I’ve been using IE 9 most of the time so I can find out if there are any issues in mojoPortal skins and functionality related to using the new version. I use the right-click on the mouse all the time to open links in a new tab, and I began to notice that some links do not show me options for opening the link when I right-click it.
It seems as if it has no context as being a link and I get the other typical items like to view the source of the page etc.
I noticed it first in Gmail when I tried to right-click the Calendar link at the top to open Google Calendar (yes I know it opens in a new tab when you click it normally anyway, but I’m a creature of habit). In other browsers I’m able to right-click those links and get a context menu for a link, but not in IE 9.
Next, I noticed it in the main menu on www.mojoportal.com
I also cannot right-click those links in IE 9 and get options to open the link.
So most links do work with right-clicking in IE 9 but some do not, I wanted to fix it because it seems like a usability issue to me that might confuse some users.
I did some trial and error experimenting and I figured out that the cause of the problem is when you have a span wrapping the text inside the link and the span is styled with display:block;
I have not yet figured out a good solution for this. In the case of the mojoportal menu the span is used to hang a background image for the top right corner of the tab and removing the display:block; breaks the design.
I have narrowed it down to a small HTML example that shows the problem:
<!DOCTYPE html>
<html>
<head>
<title>IE 9 Usability Right Clicking Links Problem Demo</title>
<style type="text/css">
.myclass{ display:block; }
</style>
</head>
<body>
<p>
<a href="http://www.mojoportal.com"><span class="myclass">Not Right-Clickable in IE9 But is Right-Cickable in All Other Browsers</span></a>
</p>
<p>
<a href="http://www.mojoportal.com"><span>Right-Clickable in IE9</span></a>
</p>
</body>
</html>Note that the same problem happens if you use an XHTML doctype, but if you remove the doctype altogether the problem goes away.
So, what do you think? Am I doing something wrong by styling an inline element with block? Is it a bug or a feature of the “most modern web browser”?
Check out some of our other Coding articles:
I imagine others will find this problem with some designs, though I will say that so far most of the skins/designs we ship with mojoPortal have tested out well in IE 9, so maybe it won’t be that common.