Sunday, October 3, 2010

Skype shot my CSS in IE8!!!(???)

I recently had to create two seperate webpages that both used two differing Cascading Style Sheets. Each page needed to allow for the viewer to change between stylesheets. A task that should be easy...but one that proved that testing in the browser doesn't automatically indicate compatability with brower plug-ins. This is apparently especially true with Internet Exploder Explorer.

What I did: Tested both pages in Firefox and IE8. Both pages would initially load correctly. The initial "index.html" worked as advertised in both browsers: the viewer was able to switch repeatedly between CSS's through the use of some simple Javascript buttons. However, the second page (stored in the same parent directory and using the EXACT same relative paths) would NOT use the first stylesheet in IE8 after the initial page load. It would toggle between stylesheets, but when stylesheet 1 was selected, the viewer was presented with default, left-align, text.

What I have:

  • Skype

  • Windows 7 Professional

  • IE8

  • Firefox 3.6.10

There were NO issues with FireFox, so I was automatically inclined to believe that the failure lied with Microsoft. I re-wrote the webpage at least six times (not that fun) and re-wrote the CSS sheets at least three. Additionally, all were validated multiple times through the W3C tools (XHTML and CSS). However, NOTHING seemed to work.

The Lightbuld:
I decided that maybe I should try to isolate from outside my current box. My wife's computer is exactly the same, with the exception of not having Skype installed (I try to avoid having Skype as much as possible, which is a WHOLE different topic). On her laptop the webpages BOTH acted correctly between the two stylesheets, on both IE8 and FireFox. I did run the IE8 Developer Tools (F12) in attempt to identify the issue, but that was no help. It was when I looked at the plug-ins that I noticed a difference:
It MUST be the Skype plug-in.

Now What:
All I can deduce at this point is that the Skype Add-in for IE8 (the one that allows you call-by-click from numbers on website) is the culprit. However, I have NOT been able to identify why. I do seriously wonder if this is an indication of how IE8 renders XHTML pages when the Skype plug-in is installed, and, MORE IMPORTANTLY, if this is not an indication of a bug in skype that could indicate a vulnerability between IE8, Skype, and parsing. I haven't had a lot of time to research this, so at this point it is purely conjecture based upon what I have seen. However, I do have a friend who had the EXACT problem and indications that Skype is the culprit.

Yet One MORE reason NOT to like Skype!


  1. Hello Dave,

    I can confirm that Skype stylesheet injection is the culprit.

    I am currently researching a cleaner solution to the issue than what I have and found your post.

    I have been able to prove that the Skype plug-in will add an additional stylesheet into your webpages. The reason that it fails in later versions of IE (especially IE9), is that it adds an additional sheet at the FIRST index, not at the last index.

    So in the case where your sheets were indexes 0,1 and 2. They will now be 1,2 and 3 with the Skype sheet at index 0.

    The reason that IE has the issue and not Firefox or Opera, or ... okay everyone else is that IE has an alternative implementation of CSS Rules.

    In IE4-8 you have document.styleSheets[INDEX].rules

    but, in IE9 you have BOTH
    (where cssRules is what is used by everyother brower)

    The interesting part is that Skype will not update rules the same way it updates cssRules, so good f&*&king luck. (In most cases with IE9, rules won't be updated by Skype at all, but cssRules will!)

    I have yet to come up with a fool-proof way to block injection.



  2. Shawn, I just remove all traces of Skype until the next time I need it. LOL Seriously though there are multiple reasons why I don't like the application, and i just heard the other day that MS bought Skype...even more reason not to like it?