I just finished a lovely new site with all kinds of bells and whistles. Lots of features and work went into this clean, extensive, and mobile responsive site. I checked it out in lots of browsers, launched, and relaxed. Until the moment that I saw the site had a handful of visitors who were using Internet Explorer 8. I’d love to reach through their computers and help them find the Windows Update button so I could fix that (and many other issues), but based on the demographics for this site, I figured I’d better look to see what they were seeing and, if they were not seeing what I wanted them to see, figure out a way to make their experience better.
I did some digging to find my fastest/easiest way to deal with this issue (which exists in the new Genesis default theme as well, not just me). If you’re on a slightly older Genesis theme which uses percentages for the content and sidebar widths, I think you’re all right, but the newer iterations have gone back to one standard pixel width, which results in the wonky layout.
I’d like to thank Gary Jones for his general awesomeness, but specifically today for his easy method to get some IE8 (and lower) love going on for your site.
You May Also Like:
The approach is basically to set up a rule to serve a special stylesheet to the IE8 people. The great thing is that you only have to put in the rules that are specific to IE8, so it can be a very small file, and it seems to work.
There are two parts. First, you need to set up a rule in your functions.php file so that the IE8 stylesheet is served up when needed. Here’s Gary’s code, tweaked a hair:
Then you set up your stylesheet. Here’s mine:
All I’ve done with this stylesheet is opened my main stylesheet, copied out the section that is @media only screen and (max-width: 1139px), and changed the .site-inner and related to be a fixed width instead of a max-width. I could’ve probably done a fixed width and left them with the wider layout, but again, I’m thinking they’re the ones on smaller screens to start with. So far as I can tell, it seems to be working!
Even though I’m not a fan of Internet Explorer, I know a lot of people use it because it’s what came on their computers, or their business hasn’t updated, or who knows. If I can make their website experience a little better without too much trouble, I’ll do it. If you have dealt with this a different and/or better way, I’d love to hear about it!
Thank you for this article Robin, I became a bit lazy with the years, any chance to have a plug in regarding this? I’m having the same logo issue, my Company who employs around 11k people still uses ie6 and ie8 running on xps at least until the end of the year.. shocking!
Hey Sandy, thanks for the comment! It might take more effort than it’s worth to put something like this together as a plugin, as I think the styling would need to be done on a per site basis, and that’s where most of the work comes into play. The PHP work is pretty simple, but depending on your site layout, the CSS may be a bit of work. Something to consider though!
Thank you for your quick reply Robin 🙂 Fair enough, I guess it will be on my to do list, why can’t they just have the one up to date browser? Maybe one day!