Icon misplaced when link wraps line
| Project: | Iconizer |
| Version: | 6.x-1.x-dev |
| Component: | Code |
| Category: | bug report |
| Priority: | normal |
| Assigned: | Unassigned |
| Status: | needs work |
This is kind of a copy of the issue for External Links module (http://drupal.org/node/132614). To make it short: when a link to, say, pdf file extends over more than one line, IE (6 or 7) doesn't display it properly. There are no problems showing it in Opera 9.6, Safari 3, FF3 or IE 8b2. You can see the problem by checking this website: http://www.cpj.ca/en/content/cpj-policy-briefs-and-features-poverty-redu...
The problem in External Links was tackled by using this patch: http://drupal.org/files/issues/extlink_ie_wrap.patch. Basically, the way it works is empty span is appended at the end if the link is being displayed inline. Also CSS is specifically targeted to the span class. This is all handled with some javascript code.
I know that Iconizer doesn't use JS... Any thoughts on how to deal with the problem here?
#1
Thank you for posting this issue.. I'll do some investigations to find a way to fix it (maybe without using JS).
If you find some further info please let me know!
Regards
#2
Subscribing
#3
I've run into the same problem using the 6.x-1.1 version. On IE7, if a link to a file wraps around a line, the icon gets placed somewhere odd.
I included a screenshot.
External Links is also running on this page and seems to be working fine.
What other info do you think you need?
#4
here is an article that can help http://www.satzansatz.de/cssd/wrappinglinkbg.html
this works for me
a[href$='.pdf'] {zoom: 1;/*triggers “haslayout” on this inline element*/
padding: 5px 20px 5px 0;
#padding: 5px 20px 0 0;/*ie7 fix*/
background: transparent url(files_icons/icon_pdf.gif) no-repeat center right;
}
the code is from the module's css file
#5
Thank you epic56645677, I found the article minimalistic, but really clear. Thank you.
So your solution is to add the "zoom: 1;" right?
Can you explain the IE7 fix?
Cheers
#6
this should be temporary solution
the "zoom:1" makes IE inline element not to wrap lines (behaves like inline-block) by triggering "haslayout" (IE/win property, not supported in IE5.0)
the padding fix is because the whole element moves out of the line (it doesn't validate)
better solution might be binding the icon to the last word, so it doesn't matter if the whole element wraps lines