---
title: Render Alternate Layouts in IE6 with Only CSS
teaser:
tags: design,css
author: Fred Yates
published_on: 2009-08-24
---
With all the rage lately being around [dropping IE6](http://idroppedie6.com/), 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](http://pocketsapp.com/pages/about) put together this
weekend for [Rails Rumble](http://www.railsrumble.com). Sadly this IE6 page
might be too snide for client work but was fun for us. Check out the [live
working example](http://pocketsapp.com) 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
## How It's Done
### The HTML
```html
IE Page Layout Here
Normal Page Layout Here
```
- 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](http://www.projectamplify.com/ie-conditional-statements.html) on how
conditional comments work.
### The CSS
#### screen.css
```css
#ie_pwnage {
display: none;
}
```
#### ie6.css
```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](http://pocketsapp.com), the app I
implemented it on.