For <lj user=”spwebdesign”> « Chris Hansen’s blog

For <lj user=”spwebdesign”>

I came across this website that is dedicated to eradicating IE 6, and thought of you. Only problem is, when I go to the site that has the code to display the anti-IE6 banner, I can’t figure out how to use it. Any thoughts?

This entry was posted on Sunday, August 9th, 2009 at 05:53 pm and is filed under Uncategorized. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.

4 Responses to “For <lj user=”spwebdesign”>”

spwebdesign says:

09/08/2009 at 10:02 pm

Thanks for that. A similar website, http://www.bringdownie6.com/, inspired my post last night.

What about the code can’t you figure out? You should just be able to drop it anywhere into the body of your website. I would, however, make a couple of small modifications. After all, there’s no reason to stick bad, bloated code in your web pages!

First, if you don’t have an IE6 stylesheet, create a file called no-more-ie6.css. Then, towards the bottom of the <head> section of your html file, stick the following snippet of code:

<!–[if lt IE 7]><br /> <link rel=”stylesheet” type=”text/css” href=”no-more-ie6.css” media=”screen” /><br /> <![endif]–>
(The value for href should be the path to no-more-ie6.css.)

Add the following lines either to your existing ie6 stylesheet or to no-more-ie6.css:

#ie6-no-more-wrapper {border:1px solid #f7941d; background:#feefda; text-align:center; clear:both; height:75px; position:relative; }<br /> #ie6-no-more-wrapper img {border:none; float:left; margin-right:20px; }<br /> #close-ie6-no-more {display:block; position:absolute; right:3px; top:3px; font-family:courier new, serif; font-weight:bold; }<br /> #ie6-no-more {width:640px; margin:0 auto; text-align:left; padding:0; overflow:hidden; color:#000; }<br /> #ie6-no-more a {float:left; color:#000; }<br /> #ie6-no-more div {float:left; width:275px; font-family:Arial, sans-serif; }<br /> #ie6-no-more div h1 {font-size:1em; font-weight:bold; margin:12px 0 6px; }<br /> #ie6-no-more div p {font-size:.9em; line-height:1em; margin:0; }

Finally, into the body of your html file, preferably towards the top, place the following chunk of code:

<!–[if lt IE 7]><br /> <div id=”ie6-no-more-wrapper”><br /> <div id=”close-ie6-no-more”><br /> <a href=’#’ onclick=’javascript:this.parentNode.parentNode.style.display=”none”; return false;’><br /> <img src=’http://www.ie6nomore.com/files/theme/ie6nomore-cornerx.jpg’ alt=’Close this notice’/><br /> </a><br /> </div><br /> <div id=”ie6-no-more”><br /> <img src=’http://www.ie6nomore.com/files/theme/ie6nomore-warning.jpg’ alt=’Warning!’/><br /> <div><br /> <h1>You are using an outdated browser</h1><br /> <p>For a better experience using this site, please upgrade to a modern web browser.</p><br /> </div><br /> <a href=’http://www.firefox.com’><br /> <img src=’http://www.ie6nomore.com/files/theme/ie6nomore-firefox.jpg’ alt=’Get Firefox 3.5’/><br /> </a><br /> <a href=’http://www.browserforthebetter.com/download.html’><br /> <img src=’http://www.ie6nomore.com/files/theme/ie6nomore-ie8.jpg’ alt=’Get Internet Explorer 8’/><br /> </a><br /> <a href=’http://www.apple.com/safari/download/’><br /> <img src=’http://www.ie6nomore.com/files/theme/ie6nomore-safari.jpg’ alt=’Get Safari 4’/><br /> </a><br /> <a href=’http://www.google.com/chrome’><br /> <img src=’http://www.ie6nomore.com/files/theme/ie6nomore-chrome.jpg’ alt=’Get Google Chrome’/><br /> </a><br /> </div><br /> </div><br /> <![endif]–>

You’ll have accomplished exactly the same thing, but the code is much cleaner, not needlessly repetitive, and will only be downloaded if you are using IE6 or below.
spwebdesign says:

09/08/2009 at 10:12 pm

Sorry about the edits. I didn’t want the formatting of my comment to screw up the layout of your blog, so I had to go back and fix it.
chrishansenhome says:

09/08/2009 at 10:38 pm

Thanks…I’ve done all that. Of course, as I use Firefox, and don’t have IE 6 on the computer, how do I check that it works OK in IE 6 again??
spwebdesign says:

09/08/2009 at 10:55 pm

Well, you could remove the IE conditional tags to see what it looks like in Firefox. You could go to http://www.xenocode.com/browsers/, download the Spoon plugin, and use a remote version of IE6. Or you could send me a link to the pages you’ve posted this on and I could check for you.