homepage Welcome to WebmasterWorld Guest from 54.204.182.118
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
3 columns, best compatibility possible, need advice
Lets make the perfect 3 column template
bluelook

10+ Year Member



 
Msg#: 4229228 posted 3:39 pm on Nov 11, 2010 (gmt 0)

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.


<!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>



/* 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
}

 

caffinated



 
Msg#: 4229228 posted 2:54 am on Nov 12, 2010 (gmt 0)

Try this:
[webhost.bridgew.edu ]

SuzyUK

WebmasterWorld Senior Member suzyuk us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 4229228 posted 12:38 am on Nov 13, 2010 (gmt 0)

Hi bluelook, this is a great effort, you may want to look in the CSS library [webmasterworld.com] and in particular at this thread [webmasterworld.com], it should give a good old-fashioned overview of IE workarounds that might still be needed for any compatibility issues that may still exist.

re. advice needed:
<!--[if IE]>
<style type="text/css">
div {zoom:1; height: 1%;}
</style>
<![endif]-->


first off that's in the wrong place, it should be in the head of the document, though I don't think it really matters.. but mostly I would think it's not advisable to use it like that. Both zoom and the 1% height is to trigger haslayout for IE floated layouts, using both should not be necessary post IE5 - then even if you do want a "catchall" in there if you apply it to every single div in your layout it could, in fact is very likely to, have unreliable results. i.e. if you were to start wanting to properly float contents, i.e. text around images.. inside the columns I think you'll find they act weird with this blanket rule

The changes that happened between IE 6/7/8 means that various haslayout issues do not act the same x-browser and the 1% height itself can be an unreliable fix for versions 7&8 - e.g. if there's any way at all that a div can pick up a height (and seeing as you have heights in there it's possible) then IE7/8 will apply the 1% height. There was another rare issue reported against using the height version of the hack but I forget what.. added- found it- ref to instability of 1% method [webmasterworld.com]

The thing with using hasLayout hacks was to workaround (mainly) IE6 display bugs/errors and it also happened to stop columns wrapping around each other like normal floats do, this is against the nature of floats anyway but due to demand it can now be achieved x-browser "legally" so the "zoom" hack should only be fed to the browsers which need it for actual bugs/errors (most likely 5.5/6).

The recommended way now is to use overflow, which IE7 also supports (well to tell the truth overflow basically also triggers hasLayout for IE7, and then works properly in IE8 so it mimics what it's supposed to do without the need for a hack ;)) - so I'd scrap the hack except maybe "zoom" and put it in a lte IE6 conditional comment but only if you still want to support that - and if I were you I would just apply it when and if you need to, to the appropriate div and applying the x-browser equivalent of overflow at the same time, i.e. don't use what you don't need.

Your layout is fairly stable anyway because of the precise widths and it's source order so I'm not sure it's even necessary at all in this instance. The other good thing about your layout is that is all floated, this in itself is a good thing as far as earlier IE versions are concerned.. it reminds me of something I once read which said "FNE" (float nearly everything)

I'm definitely anti fixed height so faux columns would be my preference - it'll be even better once we can have dual backgrounds on divs too! :)

bluelook

10+ Year Member



 
Msg#: 4229228 posted 12:56 am on Nov 13, 2010 (gmt 0)

Hello Suzy!

It's true, other members at other forums had already warned me about those issues, I've corrected them.
height: 1%; is no more (and it was in the wrong place... yikes!).
I still need to support IE6, I continue having several thousands of visitors using it...
I was told that I don't need to have float on my header.

I'm using this for a slideshow so in my case the fixed height is not a problem. For all my other sites I usually use faux columns :)

I know some basic css, didn't knew all compatibility tricks, I usually outsource my template coding but this time I wanted to do something simple.

Thank you!

milosevic



 
Msg#: 4229228 posted 9:59 am on Nov 15, 2010 (gmt 0)

Yeah Suzy is right, you should use "if lte IE6" (if less than or equal to IE6) instead of "if IE", otherwise your compatibility styles will apply to IE8 and IE9 also with likely unintended effects.

You can have more than one of these conditional comments so you could have in the same document:

if lte IE6 = IE 5.5 + 6 compatibility fixes
if IE7 = IE7 compatibility fixes

if IE = CSS3 replacements etc (maybe needs to be "if lte IE8" since IE9 supports some CSS3 styles.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved