Icon mispositioned in IE6/7.
elally - February 9, 2009 - 15:36
| Project: | External links filter |
| Version: | 5.x-2.x-dev |
| Component: | Code |
| Category: | bug report |
| Priority: | normal |
| Assigned: | Unassigned |
| Status: | active |
| Issue tags: | accessibility |
Description
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?
#1
This is how I see it. What browser are you using?
#2
Hi Xano,
Here's what I'm seeing in IE6 and IE7.
#3
#4
This 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.
#5
Ouch, 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
#6
The 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>?
#7
Should be possible. I'll try to get this working when I have some more time.
#8
@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.
#9
#10
I'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.
#11
I couldn't find this in the WCAG 2.0 standards. Is it in any of the new ones?