Edgewall Software
Modify

Opened 10 years ago

Closed 6 years ago

Last modified 6 years ago

#937 closed defect (fixed)

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

Reported by: Juanma Barranquero Owned by: cboos
Priority: low Milestone: 0.11.4
Component: wiki system Version: 0.8
Severity: trivial Keywords: layout iexplorer
Cc:
Release Notes:
API Changes:

Description

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.

Attachments (1)

bad_ext_link_wrapping_with_firefox.png (3.3 KB) - added by cboos 6 years ago.
show the old style ext-link (r2184), comment:3 rendered with firefox

Download all attachments as: .zip

Change History (28)

comment:1 Changed 10 years ago by cmlenz

  • Component changed from general to wiki
  • Keywords layout added
  • Milestone set to 0.8
  • Owner changed from jonas to cmlenz
  • Priority changed from normal to low
  • Severity changed from minor to trivial
  • Status changed from new to assigned

comment:2 Changed 10 years ago by cmlenz

  • Resolution set to fixed
  • Status changed from assigned to closed

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

comment:3 follow-up: Changed 10 years ago by Juanma Barranquero

  • Milestone changed from 0.8 to 0.8.1
  • Resolution fixed deleted
  • Status changed from closed to reopened

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

comment:4 Changed 10 years ago by 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.

comment:5 Changed 10 years ago by cmlenz

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).

comment:6 Changed 10 years ago by 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 :)

comment:7 Changed 10 years ago by 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¢

comment:8 Changed 10 years ago by cmlenz

  • Milestone changed from 0.8.1 to 0.9
  • Version changed from devel to 0.8

Later.

comment:9 Changed 9 years ago by cmlenz

  • Resolution set to fixed
  • Status changed from reopened to closed

Fixed in [2148].

comment:10 Changed 9 years ago by cmlenz

Erm, [2184], actually.

comment:11 Changed 8 years ago by Jared

  • Resolution fixed deleted
  • Status changed from closed to reopened

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

comment:12 Changed 8 years ago by sid <sid.wiesner@…>

  • Milestone 0.9 deleted

Removing the 0.9 milestone because development on it was completed.

comment:13 Changed 8 years ago by cboos

  • Keywords needinfo iexplorer added

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

comment:14 Changed 8 years ago by cboos

  • Milestone set to 0.9
  • Resolution set to fixed
  • Status changed from reopened to closed

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)

comment:15 follow-ups: Changed 8 years ago by ThurnerRupert

  • Milestone changed from 0.9 to 0.10.5
  • Resolution fixed deleted
  • Status changed from closed to reopened

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.

comment:16 Changed 8 years ago by 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>

comment:17 in reply to: ↑ 15 ; follow-up: Changed 8 years ago by anonymous

  • Milestone changed from 0.10.5 to 2.0

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.

comment:18 in reply to: ↑ 17 Changed 8 years ago by cboos

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

comment:19 in reply to: ↑ 15 Changed 7 years ago by 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.

comment:20 Changed 7 years ago by 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.

comment:21 in reply to: ↑ 3 Changed 7 years ago by cboos

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.

comment:22 Changed 7 years ago by cboos

  • Keywords needinfo removed

comment:23 Changed 6 years ago by cmlenz

  • Milestone changed from 2.0 to 0.11.1

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.

comment:24 Changed 6 years ago by cboos

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.

Changed 6 years ago by cboos

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

comment:25 Changed 6 years ago by cboos

  • Milestone changed from 0.11-retriage to 0.11.4

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).

comment:26 Changed 6 years ago by cboos

  • Resolution set to fixed
  • Status changed from reopened to closed

So this should be fixed by r7920.

comment:27 Changed 6 years ago by cboos

  • Owner changed from cmlenz to cboos

Modify Ticket

Change Properties
Set your email in Preferences
Action
as closed The owner will remain cboos.
The resolution will be deleted. Next status will be 'reopened'.
to The owner will be changed from cboos to the specified user.

Add Comment


E-mail address and name can be saved in the Preferences.

 
Note: See TracTickets for help on using tickets.