3 columns, best compatibility possible, need advice

Discussion in 'CSS' started by Coupons, Nov 11, 2010.

0
  1. #1
    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>
    Code (markup):
    
/* 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
}
    Code (markup):
     
    Coupons, Nov 11, 2010 IP
  2. wd_2k6

    wd_2k6 Peon

    Messages:
    1,740
    Likes Received:
    54
    Best Answers:
    0
    Trophy Points:
    0
    #2
    What's the problem with your layout, if any? Looks pretty good to me?
     
    wd_2k6, Nov 11, 2010 IP
  3. Coupons

    Coupons Active Member

    Messages:
    889
    Likes Received:
    42
    Best Answers:
    0
    Trophy Points:
    70
    #3
    It's working fine in all recent browsers, but I haven't tested in old ones, like IE5 or IE6.
    I just want to make it better if possible.

    Note: It also validates, I spent quite a few hours with this...
     
    Coupons, Nov 11, 2010 IP
  4. workingsmart

    workingsmart Well-Known Member

    Messages:
    411
    Likes Received:
    12
    Best Answers:
    9
    Trophy Points:
    120
    #4
    My only suggestion would be to move the if IE style declaration into the <head></head> area rather than the <body>

    Other than that, it looks great... I don't foresee issues with that code at all...

    see what you get from browsershots.org - - Pretty good source for early rendered screen shots... :)

    Cheers!~
     
    workingsmart, Nov 11, 2010 IP
  5. Coupons

    Coupons Active Member

    Messages:
    889
    Likes Received:
    42
    Best Answers:
    0
    Trophy Points:
    70
    #5
    Oh, you are right, it should be in the head, my bad! Thank you!
    Browsershots is becoming very slow... and sometimes shots are expiring even before being shown.
    I searched and found a tool for IE testing, but I haven't installed it yet, will do it in a virtual machine.
     
    Coupons, Nov 12, 2010 IP
  6. GWiz

    GWiz Peon

    Messages:
    359
    Likes Received:
    17
    Best Answers:
    0
    Trophy Points:
    0
    #6
    GWiz, Nov 12, 2010 IP
  7. Coupons

    Coupons Active Member

    Messages:
    889
    Likes Received:
    42
    Best Answers:
    0
    Trophy Points:
    70
    #7
    That is the application I was referring :)
    I'll install it today.
     
    Coupons, Nov 12, 2010 IP
  8. workingsmart

    workingsmart Well-Known Member

    Messages:
    411
    Likes Received:
    12
    Best Answers:
    9
    Trophy Points:
    120
    #8
    Nice one - I'll have to install that and test it myself... Thanks for the link...

    @Coupons = yeah I know about browsershots.... kinda sucks... that tool used to ROCK!.. oh well...

    Cheers!~
     
    workingsmart, Nov 12, 2010 IP