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.
It turns out that IE8 doesn’t understand media queries or setting a specific background size (my approach to serving up a logo file that is retina friendly but works for everyone else. Except, apparently, IE8). So what my IE8 visitors were seeing instead of my lovely site was an oversized header image and a wonky layout that didn’t fit their screen. I’m assuming it doesn’t fit their screen, at least, because I’m thinking anyone still using IE8 is on a smaller screen.
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.
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!