Search code examples
cssinternet-explorerpseudo-class

CSS after/before effects not applied on IE


I've got a fancy css neon effect on a navigation. This works perfectly on any major browser except on IE < version 10.

The problem is that there is no text shown on IE 8+9.

I have no Idea where to start with a fix so I would be very grateful for every tip. It doesn't need to be working with IE8, IE9+ would be fine.

The effect can be found on the page http://www.arch-on.ch/team/philosophie/

Many thanks in advance for any helpful input


Solution

  • CSS property text-shadow is not supported by either browser (IE8, IE9) and box-shadow is only supported by IE9

    You best solution is just not to have the glow effect in those early browsers and give users of those browsers a warning that the site looks better in a modern updated browser.

    To achieve what you want in those browsers you would have to create transparent png images and swap them out on :hover. But this because real messy (especially when you have to keep adding new text or change text) and is not efficient.

    Do not create more work for yourself with something that just applies to aesthetics.