CSS Forum

**Affiliate7** · 11-11-2010, 10:24 AM

I'm trying to make a simple design where the most important factor is compatibility:

IE 5.5+
Firefox 3+
Safari 5+
Chrome 7+

I tried using a same height column and a footer, but if you detect browser problems we can drop the same height column css code and just use faux columns.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<title>Test</title>
	<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
	<meta name="description" content="Test" />
	<meta name="keywords" content="test" />
	<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
</head>
<body>
<!--[if IE]>
<style type="text/css">
div {zoom:1; height: 1%;}
</style>
<![endif]-->
<div class="wrapper">
<div class="header">
<p>Header</p>
</div>
<div class="column" id="left">
<p>Left Column</p>
</div>
<div class="column" id="content">
<h1>Content</h1>
</div>
<div class="column" id="right">
<p>Right Column</p>
</div>
<div class="footer">
<p>Footer</p>
</div>
</div>
</body>
</html>

Code:

/* CSS */

body {
font-family: Arial, Helvetica, sans-serif;
font-size:13px;
color: #fff;
padding:0;
margin:0;
text-align: center
}
.wrapper {
width:960px;
margin:0 auto;
text-align:left
}
.header {
width: 100%;
height:50px;
float: left;
padding: 0px;
margin: 0;
background: #333 url(none) top left repeat-y
}
.column {
float:left;
height:350px
}
#left {
width:260px;
background: #333 url(none) top left repeat-y
}
#content {
width:500px;
background: #333 url(none) top left repeat-y
}
h1 {
font-size: 24px;
margin: 0
}
#right {
width:200px;
background: #333 url(none) top left repeat-y
}
.footer {
clear:both;
width: 100%;
padding:0px;
margin:0;
height:100px;
background: #333 url(none) top left repeat-y
}

**edgray** · 11-11-2010, 10:55 AM

try these:

http://www.dynamicdrive.com/style/layouts/category/C10/
http://matthewjamestaylor.com/blog/perfect-3-column.htm

**Affiliate7** · 11-11-2010, 11:37 AM

Hello Ed,

I tested both and many more, all have little problems.
Lots of complicated code or hacks that we don't know will keep working for IE 9+ ...

**LadynRed** · 11-11-2010, 09:50 PM

Then don't hack! Use conditional comments to target different css files for each version of IE - e.g. ie6.css for IE6, ie7.css for IE7, etc. The ONLY thing in those files would be the specific rules needed to make IE behave.

Why are you even bothering with something so old and dead as IE5.5 or even 6??? Total waste of energy.

**Affiliate7** · 11-12-2010, 03:57 AM

I did think about having separated css files, but I wanted to have a solution that requires the less files and code possible. Maybe a difficult task.
I still have some IE6 users, it's tough to give them a broken page, not good for reputation...

**Affiliate7** · 11-12-2010, 04:03 AM

The IE style declaration should be inside the <head></head> area.

**Affiliate7** · 11-12-2010, 07:56 AM

I've been investigating, and I still have thousands of users using IE6, but almost none using 5 or 5.5

**LadynRed** · 11-12-2010, 03:23 PM

Having multiple css files is not all that big a deal, since you are not duplicating ALL of the css for IE. You include ONLY those rules needed to "fix" the version you're dealing with. ONLY IE will read the conditional comments, and it will only load for the specific version detected.

Filling your primary css file with hacks is very bad because of the multiple versions of IE.

Until we stop supporting IE6, it will never die. Feed IE6 users what is important - the CONTENT, well styled. Leave the rest and leave them a note and a link to upgrade their 10 year old browser to something current.