CSS Stacked Paper Effect not rendering in IE

Question

I've created a basic website using CSS to create a stacked paper effect with line rulings.

The website is temporarily hosted at www.aspireddesign.co.uk/jhtutoring

Here is the CSS file: CSS Source

The webpage renders fine in Chrome, Firefox, Safari (on iPhone and iPad) but not on Internet Explorer (only tried version 8).

The CSS uses the :before and :after pseudo-elements, could this be the problem?

The line rulings are also displaying as block rather than blue.

Any ideas?

Thanks

this http://stackoverflow.com/questions/4181884/after-and-before-css-pseudo-elements-hack-for-ie-7 might be interesting for you — Nick Andriopoulos, Feb 21 '13 at 16:45
Both links are broken, making this question useless! The code should have been copied into the question. — oberlies, Jul 26 '13 at 21:42

score 1 · Answer 1 · answered Feb 21 '13 at 16:50

1

Your lines aren't showing in blue in IE8 due to that version not supporting rgba colours - see http://css-tricks.com/rgba-browser-support/.

They also won't work in IE9 as your HTML is triggering quirks mode. If you change it to render in standards mode, it should work. See here for more info: http://msdn.microsoft.com/en-gb/library/ie/gg699338(v=vs.85).aspx

answered Feb 21 '13 at 16:50

stevehayter

Additionally, IE8 and below don't support the `:before` and `:after` pseudo elements natively. I recommend selectivizr.js for adding such support (though it does need a framework like jQuery or MooTools to supply the selector functionality). – Shauna Feb 21 '13 at 18:12
I've added the and that seems to worked to a certain extent. I've also changed the colours from RBGA to hex code and that has helped too. Now, the lines aren't showing in IE at all, which I'm guessing is the :before and :after elements. I tried the selectivizr.js and that didn't work. Is there another work around? – greenroy Feb 22 '13 at 12:06
@Shauna - :before and :after elements in IE8 are supported just fine without JS. They aren't supported in IE7 and below. – Adam Jenkins Jul 26 '13 at 21:48
@Adam - You're right. I stand corrected. (caniuse.com does note, though, that IE8 only supports the single-colon syntax and not the double-colon; just in case someone comes along that is using double-colon syntax and wondering why IE8 doesn't work.) – Shauna Jul 29 '13 at 14:47

1 Answers1