The 2026 Drupal Business Survey is open. Your response will help shape the future of the Drupal business ecosystem.This is a great module and I love it! I'm having just one problem.
When the text for a link spans more than one line, the icon isn't displayed correctly. It appears to the right of the link text horizontally, and halfway between the two lines of text vertically. An example is at http://csdrupal.childrensong.org in the Rehearsal Locations block in the right sidebar.
This appears to similar to an issue in the External Links project - see #132614: strange graphic placement when link wraps line.
I'm not much of a coder, but could a similar solution be used here?
| Comment | File | Size | Author |
|---|---|---|---|
| #2 | picture.jpg | 7.1 KB | elally |
| #1 | Picture 16.png | 10.11 KB | xano |
Comments
Comment #1
xanoThis is how I see it. What browser are you using?
Comment #2
elally commentedHi Xano,
Here's what I'm seeing in IE6 and IE7.
Comment #3
xanoComment #4
adrinux commentedThis is a known bug with the whole external link icon approach, well, actually icons on inline links in general.
There's a good rundown of the bug - it's effectively a gray area in the css 2.1 spec and IE just doesn't handle it well - and several described workarounds on satzansatz:
http://www.satzansatz.de/cssd/wrappinglinkbg.html
I don't think this is something that can be fixed within ELF module, but should instead be fixed at the theme level. The problem is that there is no clear solution, although there are workarounds. We could better document the problems and workarounds though.
Personally I set IE to whitespace: nowrap ELF links via conditional comments. But that leads to some ugly line wrapping. Have a read of that article and pick your own poison.
Comment #5
xanoOuch, thanks a lot for that link! I do believe this is something that we should deal with, instead of leaving it to themers. A lot of people don't theme and besides, it's sort of a 'bug' in the sole feature ELF has to offer :-P
Comment #6
elally commentedThe article at satzansatz points to another article CSS workaround for external link with small icon. The External Links module appears to be using the workaround documented there, using a <span> instead of a <u> tag.
Is it possible for ELF to sniff the closing </a> tag and insert an empty <span> before it, then apply the CSS for the link graphic to the <span>?
Comment #7
xanoShould be possible. I'll try to get this working when I have some more time.
Comment #8
adrinux commented@elally aside from the one assertion that it didn't work in IE7 http://drupal.org/node/132614#comment-1062330 it seems like the best option, if it can be made to work.
Comment #9
xanoComment #10
adrinux commentedI've had an idea whilst reading another external link article at maxdesign – had this bookmarked because of the icon rollover states, something I wanted to try sometime =D
http://www.maxdesign.com.au/presentation/external/
The interesting thing with his approach, as regards this discussion, is that he adds (external link) to provide better accessibility for screen readers (something we might want to do anyway). His approach also has the bug we're trying to fix, but I'm wondering if instead of doing what he does we can use image replacement on that span, and replace it with an icon.
Not sure how feasible it would be with inline content, since you usually have to specify width and height to image replace, but it might be worth playing with. Would end up with the icon wrapping to a new line on occasion, but at least it wouldn't disappear/break.
Comment #11
mgiffordI couldn't find this in the WCAG 2.0 standards. Is it in any of the new ones?
Comment #12
xanoIs this bug still present in today's 6.x-3.x-dev build in modern IE versions?
Comment #13
xanoPlease open this issue again if you can provide step-by-step instructions on how to reproduce the problem using a clean installation and the latest dev versions of Drupal and External Links Filter.