CSS to Target Old Versions of Internet Explorer

garrettm30 · August 13, 2013

In another thread, I mentioned as a side-note that I block Internet Explorer 8 and below from access to my site, and another person asked if I would start a thread of how to do it. For many of you, that would not be an ideal solution, especially if you are trying to make sales. You wouldn't want to turn away any of your customers. However, the basic trick can be used in other ways, whether to put up a smaller notice, or hand tune your CSS for specific versions of Internet Explorer.

Part 1

Here's the heart of the trick: SmugMug detects what browser you are using, and if it is Internet Explorer, it adds a special class to the whole page (specifically, the HTML tag), depending on which version you are using. For example, IE 6 gets the class "sm-ie-6". That means that anything that can be altered by CSS can be targeted for specific Internet Explorer versions by adding the class at the head of any CSS selector.

Here is a simple example for those that aren't familiar with CSS. Let's say that I want every paragraph (p) element to be the color green throughout the whole site, I could use this code :

p {
     color: green;
}

It's just a simple example, and needlessly broad in scope, but it illustrates the point. Now let's suppose that I want paragraph text to be red only on IE 8, but green on every other browser including other versions of IE, then I could add this code somewhere under the previous code:

.sm-ie-8 p {
     color: red;
}

So all you have to do is write a rule, and then add the special class in front of it. You could target multiple versions with commas. Let's say if I wanted versions 7 and 9 to be blue in addition to the rules above, I would add:

.sm-ie-7 p,
.sm-ie-9 p {
     color: blue;
}

You can target versions 6-9 of Internet Explorer in this way, and possibly others (I haven't confirmed). It does not appear SmugMug gives special classes for other browsers. Edit: In fact you can target other browsers, even specific versions, and even specific platforms if you wish. See post #7 below.

So there you go. You can take that in whatever direction you want. If you were really ambitious, you could make your site look like a totally different site for each version of Internet Explorer if you really wanted to.

In my next post, I'll tell you how I made use of this feature to block versions 8 and below of Internet Explorer with instructions and code to copy.

garrettm30 · August 13, 2013

Part 2
Here is Part 2, where I show how I made use of the above post to block IE 8 and below. The gist is that I put in a container (div) that I gave the ID "upgradeBrowser." Inside that container I put my notice that the website isn't compatible with Internet Explorer 8 and below, etc. Then I blocked the view of that container by default for most browsers. Then I override that with CSS targeted to old versions of Internet Explorer so that the box fills the screen on top of the content only on the those browsers. Viewers of those browsers can't see what's underneath the container, not even if they scroll.

Update: SmugMug has fixed the following problem, so you can ignore the rest of this paragraph (which I leave in just for reference). Before I get to the instructions, please understand that there is a SmugMug Bug that messes up step 4. Despite you copying and pasting the code perfectly, once you submit it, SmugMug corrupts it. It moves around some of the HTML tags improperly despite the fact that you put it there that way on purpose. It doesn't kill the proceedure, but the improper code forces the links to start a new line, which looks a bit off. I'm waiting on a response from a SmugMug hero, and I'll let you know when I find out something.

Here's the step-by-step:

1. When logged into your site, go to Customize, then chose Customize Site.

2. Select Entire Site (with the red square next to it).

3. Under Add Content Blocks, find the HTML & CSS section, and drag an HTML block somewhere onto the page (it doesn't matter where).

4. Copy the following code, and paste it into the HTML window that comes up when you drag in the HTML block.

<div id="upgradeBrowser">[INDENT]<h2>Please Upgrade Browser</h2>
[/INDENT][INDENT]<p>The browser (Internet program) you are using is too old and not standard compliant. That means that I would have to write hacks to make my site display properly on this old and quirky browser, and it is not worth the effort when the new browsers follow my code much more faithfully. That's especially true considering I write websites just for fun and don't know all of the pro tricks.</p>
  
<p>Therefore, you must be using <b>Internet Explorer 9</b> or above, or better yet, try one of the other well-behaved browsers. I especially recommend <a href="http://www.mozilla.org/en-US/firefox/fx/#desktop" title="Click here to go download Firefox for free.">Firefox</a>, which is free, and displays the site just like I intended.</p>
  
<p>If you are still using Windows XP (i.e. not Vista or 7), then you cannot go higher than Internet Explorer 8. Never fear, the latest version of <a href="http://www.mozilla.org/en-US/firefox/fx/#desktop" title="Click here to go download Firefox for free.">Firefox</a> will still work for you.</p>[/INDENT]</div>

5. Click Done, without messing with the CSS side. Our CSS will have to go into its own block...

6. Which we do here. Drag a CSS block somewhere on the page just like you did the HTML block in step 3.

7. Copy the following code, and paste it into the CSS box that pops up when you do step 6.

#upgradeBrowser {
  display: none;
}

.sm-ie-5 #upgradeBrowser,
.sm-ie-6 #upgradeBrowser,
.sm-ie-7 #upgradeBrowser,
.sm-ie-8 #upgradeBrowser {
  display: block;
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #faf0aa;
  color: #000;
  z-index: 9999;
}

#upgradeBrowser h2 {
  margin: 20% 20px 20px;
  color: #000;
  font-weight: 700;
  font-size: 24pt;
}

#upgradeBrowser p {
  margin: 20px;
  font-size: 13pt;
}

#upgradeBrowser a {
  color: blue;
  text-decoration: underline;
}

8. Click Done in the CSS block.

9. If your home page is NOT set up to be independent, then skip this step. Independent means you can have a home page that is set up completely different than all the others, even with different menus if you chose. You can find out for sure by clicking the green Settings button right next to the Preview button at the top of the screen. This brings up the Design Settings window. If Independent Homepage (fifth option) is set to on, then repeat steps 2 through 8, except that at step 2 you click on Home Page (with blue square) rather than entire site as before.

10. Click the big green Done button at the top right, and then Publish Now, and you're done!

You can alter the text however you want. I can help you if you don't know how. Just tell me what you want it to say, and I'll put it in the right HTML.

I have tried to be as clear in my directions as I could. I hope I don't insult your intelligence for those that knew how to do most of these steps. If on the other hand, something's not clear, let me know, and I'll try to help. If you have put this on your site, and something's not right, give me a link to your site and I will take a look.

Darter02 · August 13, 2013

Cool beans! I'll try this.

Hikin' Mike · August 13, 2013

garrettm30 wrote: »

<snip>

Before I get to the instructions, please understand that there is a SmugMug Bug that messes up step 4. Despite you copying and pasting the code perfectly, once you submit it, SmugMug corrupts it. It moves around some of the HTML tags improperly despite the fact that you put it there that way on purpose. It doesn't kill the proceedure, but the improper code forces the links to start a new line, which looks a bit off. I'm waiting on a response from a SmugMug hero, and I'll let you know when I find out something.

<snip>

What I did is replaced the <p></p> tags to <div class="p"></div>. Then in my CSS I added this:

.p {
    padding-bottom: 1em;
    }

All of the links stay in the same paragraph. <img src="https://us.v-cdn.net/6029383/emoji/thumb.gif" border="0" alt="" >

garrettm30 · August 30, 2013

I said I would would update this post when I heard back from SmugMug about the HTML problem I mentioned earlier. One hero wrote me to say my request was being transferred to a hero who specialized in customization. I never heard back after that, but they have apparently fixed the problem, so that you can now paste the code as it is written without the code getting changed around. If any of you used Hikin' Mike's clever work-around, then I see no reason why you should change it to the original way unless you want to. They both should look about the same. By the way, thanks Mike.

aaronbrown · August 30, 2013

Thanks! This is great.

garrettm30 · September 9, 2013

I have just discovered that apparently you can target other browsers as well. I was viewing my site from Firefox 24 on my Mac, and I found that all of these classes were added to my site relevant to the browser:

sm-ua-gecko sm-browser-firefox sm-browser-version-24 sm-platform-mac

I decided to check other browsers, and I found these on Safari 6.0.5 for mac:

sm-ua-gecko sm-browser-firefox sm-browser-version-24 sm-platform-mac

And these on the current Chrome for Mac:

sm-ua-webkit sm-browser-chrome sm-browser-version-29 sm-platform-mac sm-chrome

And finally, on Windows IE 9:

sm-ua-trident sm-browser-ie sm-browser-version-9 sm-platform-windows sm-ie-9

So it would seem we can get very specific in targeting browsers with CSS, not only the browser, but the version and platform. In Chrome's case, I'm not sure what the difference is between sm-browser-chrome and sm-chrome. I didn't see that last class on Firefox and Safari. I don't know if this has changed since I started this thread, or if I just missed it the first time. I'm guessing I was just too hasty the first time around.

brandofamily · October 1, 2013

garrettm30 wrote: »

In another thread, I mentioned as a side-note that I block Internet Explorer 8 and below from access to my site...

How did you test this? Do you happen to have an old browser on one of your computers? I have a big ole page full of code that will not display at all in the older IE browsers. I would like to add a pleasant notice to let the viewer know why they are not seeing the page... but I have no way of checking from here at home...

here's the page I added the text notice to...

http://www.brandolinoimaging.com/Info-Pages/Help-Pages/n-zvWvH

rht · October 1, 2013

You can have multiple IE versions on one machine with some hacks (in Windows XP), or you can use a virtual machine.

You can try Windows XP Mode:
http://stackoverflow.com/questions/5902882/how-to-install-multiple-version-of-ie-ie6-7-on-virtual-pc

Run virtual machines with older browsers like IE8. Firefox is no problem, you can have multiple Firefox browsers running alongside each other.

garrettm30 · October 2, 2013

For a start, if you are on windows, there is the F12 developer mode that (among other things) allows you to change what version the browser is pretending to be. That only goes back just a few versions though. The next option is to download VirtualBox, which will allow you to run other OSes in a window. This works on Macs too (which is what I do). Then, go to Microsoft's page for web developers to get appropriate copies of the versions you are looking for. Look for Virtual Machines or VMs for VirtualBox. I found the first time I used it it was a little hard to get it all going, but maybe you can have better luck. There appears to be a lot of information on Google and some videos on YouTube, so here's hoping I've at least pointed you in the right direction.

I checked that page you mentioned with IE 6, and it indeed is behaving differently than it does in a modern browser, but I don't see any notice. I found where you put the copied code onto your site, and it looks to me like you put the CSS in the CSS section of the HTML content block. CSS placed there is limited to only that one box, so the absolute positioning won't work. You have to make a separate CSS content block. In other words, you will have to drag a HTML block (step 3) and a separate CSS block (step 6) into your page with the appropriate code pasted.

Let me know how it works.

brandofamily · October 2, 2013

garrettm30 wrote: »

For a start, if you are on windows, there is the F12 developer mode that (among other things) allows you to change what version the browser is pretending to be. That only goes back just a few versions though. The next option is to download VirtualBox, which will allow you to run other OSes in a window. This works on Macs too (which is what I do). Then, go to Microsoft's page for web developers to get appropriate copies of the versions you are looking for. Look for Virtual Machines or VMs for VirtualBox. I found the first time I used it it was a little hard to get it all going, but maybe you can have better luck. There appears to be a lot of information on Google and some videos on YouTube, so here's hoping I've at least pointed you in the right direction.

I checked that page you mentioned with IE 6, and it indeed is behaving differently than it does in a modern browser, but I don't see any notice. I found where you put the copied code onto your site, and it looks to me like you put the CSS in the CSS section of the HTML content block. CSS placed there is limited to only that one box, so the absolute positioning won't work. You have to make a separate CSS content block. In other words, you will have to drag a HTML block (step 3) and a separate CSS block (step 6) into your page with the appropriate code pasted.

Let me know how it works.

I moved that code and tested it using the F12 idea. However my old slow work computer does not show anything on the page I am referring to, but in the F12 mode thing the entire page shows up AND actually works...

CSS to Target Old Versions of Internet Explorer

Comments