Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Already on GitHub? Sign in to your account

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

Rosewood opened this Issue May 3, 2012 · 2 comments


None yet
2 participants

Rosewood commented May 3, 2012

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:


like so:

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

or so:


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


@heygrady heygrady closed this in f28a9c4 May 3, 2012

heygrady added a commit that referenced this issue May 4, 2012


heygrady commented May 4, 2012

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:


heygrady commented May 4, 2012

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.


k4gdw pushed a commit to k4gdw/textshadow that referenced this issue Jul 3, 2012

fixes #8 in IE7 and below. IE 8 and IE9 operate in a weird rendering …
…mode when a transitional doctype is declared and the normal hasLayout hacks no longer apply to those browsers.

k4gdw pushed a commit to k4gdw/textshadow that referenced this issue Jul 3, 2012

fixes #8 for when line-height is not default. Somehow I'd never teste…
…d custom line-heights before. Still, IE only allows precision to 2 decimal places on a percentage line-height so it's not always perfect, particularly above 50px.

@heygrady heygrady referenced this issue Mar 4, 2013


doctype problem #10

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment