CSS after/before effects not applied on IE

Question

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

Answer 1

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.

Answer 2

Try Quirksmode for before: and after: content: http://quirksmode.org/css/user-interface/content.html

There is also a plugin called CSS3Pie that "makes Internet Explorer 6-9 capable of rendering several of the most useful CSS3 decoration features". Maybe implementing this is okay for you. http://css3pie.com/

Otherwise you have to avoid using CSS3 if you want to go down to IE8. Check this chart for browser compatibility of CSS3 statements: http://www.normansblog.de/demos/browser-support-checklist-css3/

Cheers

Frank