giant robots smashing into other giant robots

We are thoughtbot. We make web & mobile apps.

August 24, 2009

Tagged:

Comments (View)

Render alternate layouts in IE6 with only CSS

IE6 Sucks

With all the rage lately being around dropping IE6, I found myself wanting to show an alternate layout for just IE6 users. I thought some of you front end people might be interested in how I did it, using only CSS (and a simple conditional comment). I got the chance to try this technique for a personal project myself and a few other guys put together this weekend for Rails Rumble. Sadly this IE6 page might be too snide for client work but was fun for us. Check out the live working example but keep in mind you have to be viewing the page in IE6 to see this alternate layout.

As a designer and front end developer, my code knowledge is limited to HTML, CSS, and some basic Javascript. I know my expert Rails developers could throw together some fancy way to render different layouts in IE6 but I also know their time is very valuable. Since I want to use as little as my developer’s time as possible, I devised a simple way to achieve the same results using only my HTML and CSS knowledge.

What We’re Going To Acheive

IE6 and Firefox

How It’s Done

The HTML

<html>
<head>
  <link href="/stylesheets/screen.css" rel="stylesheet" type="text/css">
  <!--[if IE 6]>
    <link href="/stylesheets/ie6.css" rel="stylesheet" type="text/css">
  <![endif]-->
</head>
<body>
  <div id="ie_pwnage">
    IE Page Layout Here
  </div>
  <div id="wrapper">
    Normal Page Layout Here
  </div>
</body>
</html>
  • First, If your page is not already contained inside a wrapper div, do so, and assign a class or id to it. Mine is called “wrapper”
  • Then, before the wrapper div, insert a div with an id name appropriately for the IE6 layout. Mine is called “ie_pwnage” because I plan on pwning IE6.
  • Finally, we’re going to include an IE6 conditional comment in the head of the HTML. This calls an IE6 specific stylesheet. All this means is that only IE6 will render the styles in this stylesheet, all other browsers will ignore it. Here’s a great post on how conditional comments work.

The CSS

screen.css

#ie_pwnage {
 display: none;
}

ie6.css

#wrapper {
  display: none;
}

#ie_pwnage {
  display: block;
  width: 700px;
  height: 282px;
  margin: 200px auto;
  position: relative;
  background: url(/images/ie6-700x282.png) 0px 0px no-repeat;
}
  • First, in your normal page stylesheet (mine is screen.css) set the #ie_pwnage div to display: none; This keeps your IE layout from showing up in other browsers.
  • Next, in your ie6.css, set the #wrapper div to display: none; This keeps the regular layout from showing up in IE6
  • All that’s left now is to style your IE layout however you want. Make sure you set display: block; to overwrite the display: none; from screen.css.

And That’s A Wrap!

That should do it for you. This is the first real step by step tutorial I’ve ever written so let me know if anything goes wrong or if it’s unclear in any way. Link to some live uses, I love seeing alternate IE6 layouts.

Don’t forget to check out Pockets, the app I implemented it on.

fyates