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?

CommentFileSizeAuthor
#3 Picture 8.png16.11 KBTommyK
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

thePanz’s picture

thePanz CreditAttribution: thePanz commented
Version: 5.x-1.x-dev » 6.x-1.x-dev
Status: Active » Postponed (maintainer needs more info)

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

ajross’s picture

ajross CreditAttribution: ajross commented

Subscribing

TommyK’s picture

TommyK CreditAttribution: TommyK commented
FileSize
Picture 8.png16.11 KB

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?

epic.ts’s picture

epic.ts CreditAttribution: epic.ts commented

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

thePanz’s picture

thePanz CreditAttribution: thePanz commented
Status: Postponed (maintainer needs more info) » Needs work

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

epic.ts’s picture

epic.ts CreditAttribution: epic.ts commented

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

Lanae’s picture

Lanae CreditAttribution: Lanae commented

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.

better solution might be binding the icon to the last word, so it doesn't matter if the whole element wraps lines

Yes, why wouldn't this work?

bhagyaraja’s picture

bhagyaraja CreditAttribution: bhagyaraja commented
Version: 6.x-1.x-dev » 6.x-1.1
Priority: Normal » Critical

same issue any solutions for this above issue

icon misplaced when link wrap lines in ie7 and ie 6

need an help asap

thanks!!!!

thePanz’s picture

thePanz CreditAttribution: thePanz commented
Version: 6.x-1.1 » 6.x-1.x-dev

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