| Project: | Iconizer |
| Version: | 6.x-1.x-dev |
| Component: | Code |
| Category: | bug report |
| Priority: | critical |
| Assigned: | Unassigned |
| Status: | needs work |
Issue Summary
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?
Comments
#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
#7
When I tried the solution in #4, it looked good in IE7 but terrible in non-IE7 browsers. The entire link was moved up and out of line with surrounding non-link text. My solution was this:
a[href$='.pdf'] {zoom: 0;
#zoom: 1; /* IE7 fix */
padding: 5px 20px 5px 0;
#padding: 5px 20px 0 0;/*ie7 fix*/
background: transparent url(files_icons/icon_pdf.gif) no-repeat center right;
}
As for fixing the module so this hack wouldn't be needed, I hope something can be done.
Yes, why wouldn't this work?
#8
same issue any solutions for this above issue
icon misplaced when link wrap lines in ie7 and ie 6
need an help asap
thanks!!!!
#9
A solution can be the following one: provide an lternate CSS targeting IE7 and IE6.. if anybody can provide a solution or share any CSS knowledge would be appreciated ;)
Cheers