Internet Explorer pseudo elements with background image

Question

All versions of modern Internet Explorer (8-11) are displaying an ":after" pseudo element with a background image in it very strangely. It's supposed to be a line of dots that go straight underneath the topnav, as a continuation for the "heart monitor blip". Instead they show up like this:

Here is the site itself: http://www.makingthedifference.ca/

The background image itself is an svg, which I know is not fully supported by all IEs, but according to my tests on BrowserStack, it's being uploaded and showing up fine in IE 9, 10 and 11.

In the IE console on BrowserStack, the :after elements are being completely crossed out, as if IE is finding fault with them, and the dots are showing up unevenly (as pictured above). I do have multiple pseudo elements in there because the site is mobile responsive.

Shows up fine with Chrome, Firefox and Safari.

Also, unfortunately, I can't use border-bottom dotted, the dots are not the right shape.

Answer 1

your page has 52 markup errors.....

http://validator.w3.org/check?uri=http%3A//www.makingthedifference.ca/

Line 137, Column 26: Element div not allowed as child of element ul in this context. (Suppressing further errors from this subtree.)

.... web browsers differ in how the 'correct' coding errors.....

the HTML5 spec is the first W3 spec to specify how userAgents should correct markup and presentational (css) errors....

If you correct your markup errors (eg... use

i/o for a child) ALL browsers will render your website 'More or Less' the same as there is no need for interpretation of how 'errors' should be corrected.

Answer 2

After much finicking, I decided to just re-save the SVG with Adobe Illustrator, and that solved the problem for all versions of IE that support SVGs. I have no idea why the SVG was in error for IE, and why it worked perfectly fine for Firefox, Chrome and Safari, but it did.

Answer 3

It's about setting the width and height attributes:

<svg version="1.1" id="Laag_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 280 542" style="enable-background:new 0 0 280 542;" xml:space="preserve" width="280" height="542">

As you can see the last two digits of viewBox needs to be added to width="" and height=""