Issue with shadow positioning in certain versions of IE with certain DTDs

[loafingaround]

Nice plugin. Thanks.

However I am having an issue when using certain versions of IE with certain DTDs.

The problem is basically that the absolutely positioned shadow text, span.ui-text-shadow-copy, ends up vertically below the "original" text, span.ui-text-shadow-original.

To be precise: span.ui-text-shadow-copy seems to have its "origin" (left: 0px; top: 0px") horizontally aligned with but vertically below the top left corner of the span.ui-text-shadow-original by the height of span.ui-text-shadow-original minus the height between the bottom of the text in span.ui-text-shadow-original and the bottom of span.ui-text-shadow-original itself, basically so that the top edge of span.ui-text-shadow-copy touches the bottom edge of the text in span.ui-text-shadow-original. (As you will have guessed, I used the Developer Tools in IE to inspect it.)

So, if the following is set:

$("h1").textshadow("0px 0px 0px #008000");

then the shadow, instead of being hidden behind the original, will be horizontally aligned with the original but vertically below it without the text overlapping, although the spans do overlap.

This does not happen (the plugin works fine) when:

• using IE versions below 8
• in quirks mode

(at all as far as I can tell) or when using another version of IE but with one of the following DTDs:

• XHTML 1.0 Strict
• HTML 5
• HTML 4.01 Strict

...or combinations of these (although I have not tried many). However the problem is apparent for example if you use IE9 (in IE9 document mode) with the XHTML 1.0 Transitional DTD.

To make it clearer and to prove the point, here is a jsfiddle: http://jsfiddle.net/xYa4G/9/
As you may know, you can try different DTDs using the drop down in the "Info" panel on the left.

The fix I found, although you may not find this is very clean, is to insert a white space text node (either a space or a new line) just before the closing tag of span.ui-text-shadow:

<span class="ui-text-shadow"><span class="ui-text-shadow-copy">Text</span><span class="ui-text-shadow-original">Text</span></span>
                                                                                             whitespace text node here ---^

I did this inside your "wrapWord" function just after:

shadow.appendChild(copy);
shadow.appendChild(orig);

like so:

shadow.appendChild(document.createTextNode(" "));

or so:

shadow.appendChild(document.createTextNode("\n"));

Maybe you will find a cleaner solution than this though. Hope I've helped.

Tom

[heygrady]

I'm realizing that this fix won't work for cases where there's not supposed to be an extra space between two nodes. I decided to roll back the change and put a note on the readme about it. For instance:

<h1><b>Hell</b><i>o</i></h1>

[heygrady]

After some further digging, I got IE7 to behave using the zoom: 1 hack but that won't work in IE8 or IE9. There's some hints on what to do about it on Stack Overflow. The fix seems to be that if you have to use a transitional doctype in IE8 and 9, then you should throw the browser into IE7 rendering mode using something like X-UA-Compatible: EmulateIE7. That really a last ditch effort though. I would recommend using the HTML5 doctype instead.

http://stackoverflow.com/questions/2616778/going-to-ie8-with-doctype-html-4-01-transitional-any-suggestions-appreciated