Mailto and Extlink images not showing

That style should not be showing if you're running FireFox. Have you set Firefox identify itself as Internet Explorer through some plugin or add-on?

Same problem here. No strange plugins installed. Seems that both Firefox 3.6 and Google Chrome evaluate the following line as true, hence the inline rule added:

if (($.support && !$.support.boxModel) || ($.browser.msie && parseInt($.browser.version) <= 7)) {

$.support.boxModel is undefined
!$.support.boxModel is true
hence the if evaluates to true and IE rules are added.

This is probably a consequence of the fact that D6 comes with jQuery 1.2.6. It doesn't look that it has support for $.support.boxModel.

Another solution is needed to detect IE <= 7.

Arg. This is silly. This damned icon display issue is driving me crazy. If $.support is undefined (it should be) then the conditional should never even get to $.support.boxModel and the whole thing should return FALSE.

The $.support variable should be completely empty in jQuery 1.2.6 (the version that comes with Drupal 6) and so it should fallback to the $.browser check. Newer versions of jQuery should have $.support.boxModel which will be TRUE in all browsers except for IE6.

@fax8: What version of jQuery are you using?

jQuery 1.2.6 which comes with default core drupal 6.x install.

To verify which jQuery you are running just insert the following in the address bar while visiting your drupal website (tested with Firefox 3.6):

javascript:$().jquery;

The problem here looks to be the fact that in jQuery 1.2.6 there is not a $.support.boxModel property while there is a $.support one. Then accessing to $.support.boxModel returns undefined which negated (!) becomes true.

What about using something like the following?

  if (($.support && !$.support.boxModel === undefined && !$.support.boxModel) || ($.browser.msie && parseInt($.browser.version) <= 7)) {

Tested with FF 3.6 and Chrome and it seems to work as expected. No Windows machine here so not able to test on IE.
Based on http://stackoverflow.com/questions/27509/detecting-an-undefined-object-p...

@FunkMonkey I wouldn't risk upgrading jQuery to a newer release as other modules and Drupal itself could rely on that particular version and upgrading might break something else.

Testing #7's proposed fix using jQuery 1.2.6

Works on FF 3.6.3, Chrome 5 beta, IE 5, IE 6, IE 7, and IE 9 Preview. Doesn't work on IE 8 though. Not sure why.. =\

Oops. Mixed up my browsers. Works on everything except IE 9 Preview (which doesn't matter for now, I guess).

Flipping switch..

Flipping switch back.. silly me..

What problems did you experienced with IE8?

I just tested it and seems to work fine: if() evaluated as false and not executed.

Ok, no problems.

Ok, I think we have tested enough. Setting this as RTBC. Attached a patch which implements the changes in #7.

Maintainers please test and release a new versions.

Thanks,

Fabio Varesano

Could we clarify this comparison?

!$.support.boxModel === undefined

It seems like we're negating before checking undefined, in which case this would always be false no matter what the value of $.support.boxModel is.

You are perfectly right. Sorry for the error. With the code above the first block in the or is always false.

I just tested with IE 6,7,8 and the other users confirm it: it's just enough the following if statement:

if ($.browser.msie && parseInt($.browser.version) <= 7) {

The question now is.. what's the meaning of the first part of the or? Can we get rid of it?

The question now is.. what's the meaning of the first part of the or? Can we get rid of it?

The use of $.browser is deprecated and should not be used in newer versions of jQuery. Instead $.support should be used whenever possible. The intention was to use $.support if it exists and used $.browser as a fallback. Unfortunately it seems like $.support is mysteriously actually available when it shouldn't be for some users, which is why we're seeing this problem. On a fresh installation of Drupal with jQuery 1.2.6, this problem does not present itself currently because $.support isn't defined (as it shouldn't be).

I tracked down where $.support is defined on my website. I have the Jquery Cycle Plugin installed and in it's code there is:

// if $.support is not defined (pre jQuery 1.3) add what I need
if ($.support == undefined) {
	$.support = {
		opacity: !($.browser.msie)
	};
}

So, that's were the $.support variable is defined for my website.

Ok, attached a new patch which should fix the problems arisen in #17.

Latest patch works for me in all browsers I have installed: IE8, Chrome 5, Firefox 3.6, and Opera 10.

I am having the same issue, applied the patch in #21 yet still unable to see the icons in IE8, but shows fine in Firefox 3.6.3
using jQuery 1.2.6

After applying patch #21, chrome shows the icon now, but IE8 and Firefox doesn't show it.. (only a blank space there)

*Update* After refreshing several times in Firefox, the icon miraculously appeared =.= I wonder if every user needs to refresh several times to see the icon?
Still doesn't work for IE8 though.. no matter how many times i refreshed the page... I believe Vako is having the same problem?

Can anyone help me have a look at http://www.thesimplest.net/links to see if the icon is there? (particularly on IE8)

Can I ask some questions regarding this line of code? I'm not a coder so doesn't really get this..

1) Why do we need to add $('span.ext, span.mailto').css('display', 'inline-block');? Seems like it is added for IE versions lesser than 7 and also if $.support equals to true... which leads to the second question..
2) What is $.support actually?

Second thing, I found out why it doesn't work on my IE8, because $.browser.version some how equals to 6.0 on my browser.. (i typed in javascript:$.browser.version; to check) though I click the 'About' in IE and it says version 8.0.7600.16385

Weird..

#21 works for me, both with and without jquery_update-6.x-2.x in IE 6, 7, 8, Firefox 3.6, Chrome 5, Safari 4 and Opera 10.

Well tracked down fax8!

@itori57, the icons on the page linked to in #25 shows up fine in IE8 for me.

Thanks fax8, I've committed #8 and I'll get out a 6.11 release right away.

I guess you mean #21 .. great, thanks!

Oh yes, #21, I have no idea where I came up with "#8". This fix is now already rolled out in the 1.11 version. Thanks again!

Thanks for the patch in #21.. however I still don't understand why my internet explorer 8 is detected as 6.0, making the icon not showing up.. might happen to some of the visitors too..

Can someone explain why need to add $('span.ext, span.mailto').css('display', 'inline-block'); for lower IE versions?

Can't we just remove the back part with only the front part? Something like..

if ($.support && !($.support.boxModel === undefined) && !$.support.boxModel) {
     $('span.ext, span.mailto').css('display', 'inline-block');
   }

Thanks again!

Can someone explain why need to add $('span.ext, span.mailto').css('display', 'inline-block'); for lower IE versions?
To fix it's broken box model

Can't we just remove the back part with only the front part?
It won't work with jQuery 1.2.6 (Drupal 6.x default) as it doesn't have support for $.support

=.= Nevermind I don't know what is box model/jQuery/$.support..

I guess the only problem now is on IE8 that wrongly detected as IE6 for some reason (like mine) other than that it's all good. Thanks =)

The icons still don't show up if one uses the meta-tag to force IE7 compatibility mode (meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7").
I've played around with various settings in the IE developer, and with Browser state set to IE8 compatible and Document state to IE7-standards (I don't know what the exact names are in English), everything works as it should. Does anyone know the meta tag to force this combination...?

Yes, shows great under FireFox, however doesn't show anything in IE 8, but reserves the space for it. i.e.: you can see a small space where it should be.

using ver 6.x-1.2

Re-opening case, issue still exists and hopefully will be fixed.

i.e.: the graphics show under FireFox but not under any version of IE. Using Drupal 6.13 & 6.17.

Are you already using the 6.x-1.11 version Vako?

yes, I am using 6.x.1.11 and I deleted and copied the code again from a new download, just to make sure.
Still I can't seem to see the icons on any version of IE even on other computers.

I can confirm the problem running firefox 3.5.9 on ubuntu.
And the same on chrome 5.0.375.99 also on ubuntu.

Both have the inline-block display.

Chrome is displaying the images, for me only IE has the problem. Has anyone tested it with Safari or Opera?
There must be a security setting in IE that is stopping the images from showing.

If I enable Compatibility View in IE8 the images are displayed correctly; disabling it prevents them from appearing. Maybe this will be of some help to fixing the issue.

IE8 doesn't show Icons in Compatibility Mode - switching it back to normal mode shows icons again. Does this help to resolve the problem?

Another point to add that might be of help, I added some clearfixes to my stylesheets and my extlink icon disappeared in IE8, when I removed them, they returned again.

I was revisited by the disappearing external icon fairy. I fixed it by adding vertical padding to the span at the end of my theme css. (I also had to redeclare the right padding as some other css must have over-ridden it.)

span.ext {
  padding:5px 0 5px 0;
  padding-right: 12px;
}
span.mailto {
  padding:5px 0 5px 0;
  padding-right: 12px;
}

Thanks for the tip. How can we test this and will it be possible to add it to the code...

Is there a definitive solution to this?
I've inherited a Drupal-6.20 site with the "External Links" module enabled. All's well in FF, Chrome, Safari.
But in a few Internet Explorer versions, the image doesn't appear, only the space, as follows:

Other versions of IE are OK, including IE7 (!!) , IE8-with-IE8-Standards and IE9. I feel like the answer is just out of grasp.

@owenmck: No I haven't seen/heard an answer to this problem. Do you have a link to a site with this problem? I'm guessing this is an issue with conflicting CSS, but maybe it's still something with External Links itself. This problem was "resolved" before IE8 existed, a new issue probably should have been created specifically for IE8/9 :P

I am using Drupal 7 and this is also happening for me, in the most current browsers as well (Firefox, Chrome, Safari and IE 9 running on a PC is what I'm looking at right now). Here's my link:

http://mtc.alta-dev.com/

Thoughts?

Update: All I did was add some css defining the width and height of the image to the external link span and it fixed it:

span.ext { width: 10px; height: 10px; }

@quicksketch (Apols for late reply).. It seems to be OK in my live envi, problem only exists in my UAT environment, so this is "my" problem. Thanks for your super-quick follow-up

@owenmck: Thanks for the followup.

@alleyhector I apparently discarded my VirtualBox VMs, so it's going to take me a while to test this out in Windows browsers. You site works fine with extlinks in Chrome 21, Safari 6, and Firefox 15 on my Mac. Usually all those browsers are very consistent between Windows/Mac, so I'd be very surprised at any discrepancy there. If you can provide *exact* browser versions and exact description of the problem (with a screenshot preferably) that might help narrow down the situation. Seems to me like this is still an environment problem rather than something with extlinks.

Looks like @alleyhector fixed the problem too (I'm guessing conflicting CSS on the site, as the theme's style.css will always override extlink.css). So still no problems found with External Links module itself. Please open a new issue for further problems with the icon not showing up.

In my case (drupal 6 theme) I apply following css code to change the box model (css copied from omega 4):

/* apply a natural box layout model to all elements */
*, *:before, *:after {
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
 }

Therefore the Work around for Internet Explorer box model problems will be applied:

if (($.support && !($.support.boxModel === undefined) && !$.support.boxModel) || ($.browser.msie && parseInt($.browser.version) <= 7)) {
    $('span.ext, span.mailto').css('display', 'inline-block');
  }

Setting width and height as proposed in #49 works so far.