extlink.gif not nice on IE/Win when wrapping the link to two or more columns

[Juanma Barranquero]

For example, on tables:

​This is an externallink which happens to have a very long description so you can see the problem with wrapping the link

This is just to fill more space

And this too

To see the problem, view the ticket with IE/Win.

[Christopher Lenz]

Should be fixed (or rather, successfully worked around) in [1072].

[Juanma Barranquero]

IE/Win still has issues with the "external" icon. Witness what happens when the link is hanging out from a line to the next:

Let's see what Internet Explorer is ​able to do with a link like this one, shall we?

just to fill more space

a little more room

just a tiny bit

almost there

ok, that's it

[Juanma Barranquero]

Well, it's difficult to show it when the preview and the final thing aren't the same, but the gist of it is that:

 +------------------+
 | This is <<a link |
 | that wraps>>     |
 +------------------+

On IE/Win, the highlighted text ("a link that wraps") is preceded by blank space; the external icon is not visible.

[Christopher Lenz]

This is a hard one. See ​http://www.webmasterworld.com/forum83/4678.htm for a workaround, which basically consists of putting an empty inline element inside the link, for example:

    <a href="..."><span></span>Link text</a>

Not sure I like that, but it seems the only other alternative would be to hide the extlink icon from IE/Win completely (for example by using the :before pseudo-element).

[Juanma Barranquero]

At my Trac installation I've customized the icon out in tables (not just for IE) so it's less of a problem for me. But if you're going to hide the extlink icon for the browser with ~95% market share, you could just get rid of the thing altogether…

I admit I'm biased; I simply don't think extlink icons are a good idea :)

[sam]

You could use the following Css hack to prevent IE evaluating a bunch of Css properties :

#header {margin-bottom:3em}
html>body #header {margin-bottom:1em}

IE can't understand the second CSS rule, due to the html>body CSS command, so it will ignore it and use the first rule. All other browsers will use the second rule.

Replaced in the Trac Css context, it would give something like :

/* Do nothing special for ext-link in IE
 * But for others ...
 */
html->body a.ext-link {padding-left: 10px; background-image: url("..."); }

I don't have an IE to test it, anyone ? My 2¢

[Christopher Lenz]

Later.

[Christopher Lenz]

Fixed in [2148].

[Christopher Lenz]

Erm, [2184], actually.

[Jared]

Not sure if this belongs here or not, but on IE7 beta 3, the extlink.gif doesn't display regardless of line length.

[sid <sid.wiesner@…>]

Removing the 0.9 milestone because development on it was completed.

[Christian Boos]

Well, the external link in the description of this ticket renders well, in IE6 at least. Can someone test with IE7?

[Christian Boos]

The link displays in IE7, but it can be a bit squished. I think that's good enough (for ie).

(restoring the original milestone corresponding to r2184)

[ThurnerRupert]

the link renders well in internet explorer, but the mouse pointer changes to something else, and the right mouse button menu where you have such important things like "open in a new window" is not available any more.

for a better implementation of such an icon see ​http://moinmoin.wikiwikiweb.de (example can be immediately seen at ​http://bazaar-vcs.org/).

allow me to reopen this.

[ThurnerRupert]

a.http:before {content: url(../img/moin-www.png); margin: 0 0.2em;}

<a class="http" href="http://doc.bazaar-vcs.org/bzr.dev/server.htm">there is a smart server</a>

[anonymous]

Replying to ThurnerRupert:

the link renders well in internet explorer, but the mouse pointer changes to something else, and the right mouse button menu where you have such important things like "open in a new window" is not available any more.

Well, that must be Internet Explorer 6, as IE7 doesn't have these issues. There's only a slight problem for multiline links, like the one in the description above.

for a better implementation of such an icon see ​http://moinmoin.wikiwikiweb.de (example can be immediately seen at ​http://bazaar-vcs.org/).

"Better" is all relative here: the icons don't even appear using IE7 … (on e.g. ​http://bazaar-vcs.org/Articles), while they appear in Firefox. I prefer to support IE7 rather than IE6.

[Christian Boos]

(anonymous was cboos who forgot to log in, using IE ;-) )

[hyuga <hyugaricdeau@…>]

Replying to ThurnerRupert:

the link renders well in internet explorer, but the mouse pointer changes to something else, and the right mouse button menu where you have such important things like "open in a new window" is not available any more.

for a better implementation of such an icon see ​http://moinmoin.wikiwikiweb.de (example can be immediately seen at ​http://bazaar-vcs.org/).

allow me to reopen this.

Has this been fixed in 0.11b1 or is it just me? I have a server running 0.11b1 with a custom template/stylesheet (only some relatively minor changes) and I'm not having this problem with IE6 (I don't have a copy of IE7 to test on). I do see the problem on t.e.o and any other site running 0.10.x.

If it is my template, I can't for the life of me figure out what I changed that would have fixed the problem. But something seems to have fixed it.

[osimons]

Replying to hyuga <hyugaricdeau@gmail.com>:

Has this been fixed in 0.11b1 or is it just me?

Tested with 0.11b1+ and IE7 with the original test case in ticket description + the flows test example from comment:3. The external image in ticket description renders as centered on the two lines instead of preceeding the start of the link. The next table example renders correctly as it does not flow lines - the whole link is on second line.

I see no issues with mouse pointer or missing right-click menu. Only positioning/flow of the external link icon.

[Christian Boos]

Test case:

||[http://projects.edgewall.com/trac/ This is an externallink which happens to have a very long description so you can see the problem with wrapping the link] || This is just to fill more space || And this too ||
----
|| Let's see what Internet Explorer is [http://www.microsoft.com able to do with a link like this one], shall we? || just to fill more space || a little more room || just a tiny bit || almost there || ok, that's it ||

which renders as:

---

​This is an externallink which happens to have a very long description so you can see the problem with wrapping the link

This is just to fill more space

And this too

---

Let's see what Internet Explorer is ​able to do with a link like this one, shall we?

just to fill more space

a little more room

just a tiny bit

almost there

ok, that's it

---

So, right it still fails for IE7 and Trac 0.11dev r6465.

[Christopher Lenz]

The original fix for the original issue here was to use the structure:

  <a href="#" class="ext-link"><span class="icon"></span>Link text</a>

At some point, however, this was changed to:

  <a href="#" class="ext-link"><span class="icon">Link text</span></a>

Which renders the original fix ineffective and makes the nested <span> redundant. I can't figure out when that change was made and why, but the current markup and style just makes no sense at all anymore, and multiline external links once again look horrible in IE6 and IE7.

[Christian Boos]

Not disputing the fact that it's currently broken, but using <span class="icon"></span>Link text introduced another problem, which appeared even for shorter links and other browsers like Firefox: when wrapping text, a line break could occur between the icon and the link text. So a proper solution has to take this aspect into account as well.

[Christian Boos]

show the old style ext-link (r2184), comment:3 rendered with firefox

[Christian Boos]

The glitch shown in attachment:bad_ext_link_wrapping_with_firefox.png​ seems to be gone in Firefox 3.

However, when I tried to restore the original fix:

Index: trac/wiki/formatter.py
===================================================================
--- trac/wiki/formatter.py      (revision 7886)
+++ trac/wiki/formatter.py      (working copy)
@@ -473,13 +473,13 @@
         local_url = self.env.config.get('project', 'url') or \
                     (self.req or self.env).abs_href.base
         if not url.startswith(local_url):
-            return tag.a(tag.span(text, class_="icon"),
+            return tag.a(tag.span(class_="icon"), text,
                           class_="ext-link", href=url, title=title or None)
         else:
             return tag.a(text, href=url, title=title or None)

     def _make_mail_link(self, url, text, title=''):
-        return tag.a(tag.span(text, class_="icon"),
+        return tag.a(tag.span(class_="icon"), text,
                       class_="mail-link", href=url, title=title or None)

     # WikiMacros

the icon didn't appear in IE7.

I had to add a &nbsp; in the span, so that it shows up properly there. So this looks now good in all the other browsers tested (IE 7.0.6001.180000, Safari 3.2.1, Chrome 1.0.154.48, Opera 9.63, Firefox 3.0.6 - all on Windows).

[Christian Boos]

So this should be fixed by r7920.