If you view this site in a modern browser, it should look fine. But in IE8 it’s a mess. It has the “shiv” polyfill, but it doesn’t seem to be plugging all the cracks. If you don’t have IE8, here is what I see:-
A few issues there. I think the blue background has something to do with IE thinking that the main content is nested within the nav element, even though it’s not.
This affects other things on other pages, like lists displaying inline when they should not. The Testimonials page is unreadable. Also, floats are not floating.
The main problem is the svg elements which are messing up the nesting in IE8 as it doesn’t see them properly and gets all the html mixed up. If you remove the svg you can see that IE8 starts to look ok.
I would suggest that if you want to support IE8 then you don’t use svg or you use some sort of fallback. Use downlevel revealed CCs for good browsers and normal CCs for ie8 and supply a png image.
I never considered the SVGs, as they are mostly hidden on desktop. I did a png fallback for the main logo, but that’s in an img tag. I wanted to icons inline to use css to colour them.
I’ll have a look at the links.
Thanks.
In that pen, they use <!--[if gte IE 9]><!--> to include the svg.
I was under the impression that condition worked only on IE9 and exclude other browsers like Chrome and Firefox, but that seems not to be the case. Is that correct?
It is a dilemma, I don’t want a minority of dinosaurs to spoil the experience for everyone else, but still offer them something presentable.
They are ‘downlevel revealed CCs’ as opposed to the normal kind and as such all browsers apart from ie9 and under see them as simple normal closed comments.
e.g.
<!-- normal comment -->
Normal html
<!-- normal comment -->
Only ie9 and under read CCs so when you add the ‘gte IE 9’ into the mix the content is also offered to ie9 and above.
e.g.
<body>
<!--[if gte IE 9]><!-->
<p>hello to all browsers except ie8 and under</p>
<!--<![endif]-->
<!--[if lt IE 9]>
<p>hello to ie8 and under</p>
<![endif]-->
</body>
I see it now. The condition closes the comment on the opening tag, so to other browsers, it’s effectively not there.
I had it in my head that I would need ! IE conditions too, to cater for other browsers, more mess than I would care for.
After going to the trouble of making png versions of all the icons, then adding the fallbacks, I decided not to bother.
I kept the conditions to hide the SVGs from IE8, but removed the media query polyfill, so IE8 wont need to see any icons, as they only appear in the mobile view.
I did try making it all work, but not all png icons displayed, and not always correctly. I also tried adding js to make the menu display.
In the end I thought, why spend so much time complicating things? Hiding the svgs sorted the styling problems so the site can be read and navigated in IE8, that’s good enough. You just not get the mobile view in IE8.
I also added a little css in the condition to hide the backgrounds, as they looked ugly with cover not working.
Yes, I think that’s a good compromise for that old browser. Sometimes you just have to say ‘is it worth it’ when dealing with appearance issues and let the older browsers have a functional but not so pretty display.
I think ditching the media query polyfill is a good idea. It just makes things hard work. I don’t believe anyone is using a browser that old on mobile today. So long as it is reasonably fluid, to cope with laptops and suchlike, there should be no need for queries.
But I’ll keep the shiv polyfill, that serves a purpose.
