Summary

If a menu with external links is displayed in the footer section, the external links icon does not appear.

Steps to reproduce

  • Create or edit a menu and add a menu item with an external link
  • Add the menu to the Footer region
  • The external link icon will be missing whereas expected result is to see the icon

Code snippet

The code that appears to be missing is the span tag right after the link. Example of external link with icon:

<td class="views-field views-field-field-source-url">
            <a target="_blank" href="http://kristen.org" class="ext">http://kristen.org</a><span class="ext"></span>
</td>

Example of external link without icon (from footer menu):

<li class="last leaf"><a title="" href="http://ucsd.edu" class="ext" target="_blank">UC San Diego</a></li>

Comments

makangus’s picture

makangus commented

The JS is checking if your link is an inline element before putting the <span class="ext"></span> after the link. Your <a> probably has a float on it which turns it into a block element.

timjh’s picture

timjh commented

I had a similar problem with links in a menu. I had made the <a> a block element so that the link worked over the entire width of the menu. Noting that External Links did not insert the <span> element but did add the "ext" class to the anchor itself, my solution was to copy extlink.png from the module into my theme folder and then use this CSS:

.menu li.leaf a.ext::after {
	content: " " url(extlink.png);
}
new123456789’s picture

new123456789 commented

How do I restructure my footer menu so it just automatically picks up the external link icon?

new123456789’s picture

new123456789 commented

Thanks for that. It works in Firefox but not IE8. Did it work for you?

timjh’s picture

timjh commented

Try with one colon (a.ext:after) instead of two. See http://msdn.microsoft.com/en-gb/library/ie/cc304076%28v=vs.85%29.aspx

new123456789’s picture

new123456789 commented

Thanks for that.
Just tried that, but icons still not appearing in IE8. They are there in FF though...

quicksketch’s picture

quicksketch
he/him
commented
Category: bug » support

The JS is checking if your link is an inline element before putting the after the link. Your probably has a float on it which turns it into a block element.

Like @makangus says: this problem shows up if the links are rendered with CSS as display: block. It doesn't matter where on the page your links are.

new123456789’s picture

new123456789 commented

Thank you. How do I fix this ?

timjh’s picture

timjh commented

Perhaps the affected anchor is not even getting the "ext" class. Use a variation of the CSS I listed in #2 to target the anchor that is not getting the icon.

elachlan’s picture

elachlan commented
Status: Active » Closed (works as designed)

See #7 for details.