IE 6 & 7 issues in two column layout

Cyber Shiva · July 7th, 2008, 03:47 AM

I tried chapter 2 (multicolumn layouts) code in my project. I have issues regarding IE 6, 7.

IE 7:
<div id='content'> is touching the header at top.
http://rubyonrails-spinoffs.googlegr...GqyAIeuriQM_QN

IE 6:
<div id='content'> is touching the footer at bottom.
http://rubyonrails-spinoffs.googlegr...GqyAIeuriQM_QN

two-column.html:

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>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title></title>
        <link rel='stylesheet' type='text/css' href='two-column.css' />

        <!--[if lt IE 7]>
            <link rel='stylesheet' type='text/css' href='two-column-ie.css' />
            <script src="ie7/ie7-standard-p.js" type="text/javascript"></script>
        <![endif]-->
    </head>
    <body>
        <div id='header'>
           <h1>Global Delivery</h1>
        </div>
        <div id='container'>
            <div id='first-column'>
                Text in the first column.
            </div>
            <div id='content'>
                Text in the content column.<br />
                 Text in the content column.<br />
                 Text in the content column.<br />
                 Text in the content column.<br />
                 Text in the content column.<br />
                 Text in the content column.<br />
                 Text in the content column.<br />
                 Text in the content column.<br />
                 Text in the content column.<br />
                 Text in the content column.<br />
                 Text in the content column.<br />
                 Text in the content column.<br />
                 Text in the content column.<br />
                 Text in the content column.<br />
                 Text in the content column.<br />
                 Text in the content column.<br />
                 Text in the content column.<br />
                 Text in the content column.<br />
                 Text in the content column.<br />
                 Text in the content column.<br />
                 Text in the content column.<br />
                 Text in the content column.<br />
                 Text in the content column.<br />
                 Text in the content column.<br />
                 Text in the content column.<br />
                 Text in the content column.<br />
                 Text in the content column.<br />
                 Text in the content column.<br />
                 Text in the content column.<br />
                 Text in the content column.<br />
                 Text in the content column.<br />
                 Text in the content column.<br />
                 Text in the content column.<br />
                 Text in the content column.<br />
                 Text in the content column.<br />
                 Text in the content column.<br />
                 Text in the content column.<br />
                 Text in the content column.<br />
                 Text in the content column.<br />
                 Text in the content column.<br />
                 Text in the content column.<br />
                 Text in the content column.<br />
                 Text in the content column.<br />
                 Text in the content column.<br />
                 Text in the content column.<br />
                 Text in the content column.<br />
                 Text in the content column.<br />
                 Text in the content column.<br />
                 Text in the content column.<br />
                 Text in the content column.<br />
                  Text in the content column.<br />
                 Text in the content column.<br />
                 Text in the content column.<br />
                 Text in the content column.<br />
                 Text in the content column.<br />
                 Text in the content column.<br />
                 Text in the content column.<br />
                 Text in the content column.<br />
                 Text in the content column.<br />
                 Text in the content column.<br />
                 Text in the content column.<br />

            </div>
        </div>
        <div id='footer'>
            <h6>Footer</h6>
        </div>
    </body>
</html>

two-column.css:

Code:

body {
    background: white;
    font-family: sans-serif;
    margin: 10;
    padding: 0;
}
h1 {
    margin: 0;
    font-weight: normal;
        color:#a0d967;
}

h6 {
    margin: 0;
    font-weight: normal;
}
div#container {
    position: relative;
    min-height: 400px;
    border: 1px solid gray;
    background: #fff;
    max-width: 1000px;
    min-width: 750px;
    margin: auto;
    z-index: 2;
}
div#first-column {
    position: absolute;
    top: 0;
    bottom: 0;
        left: 0;
    border: 1px solid gray;
    background: #fff;
    width: 200px;
    margin: 3px;
}
div#first-column {

}
div#content {
    margin: 3px 3px 3px 208px;
    background: #fff;
    border: 1px solid gray;
    min-height: 392px;
}
div#header,
div#footer {
    background: #004a66;;
    padding: 3px;
    border: 1px solid gray;
    max-width: 994px;
    min-width: 744px;
    margin: auto;
}
div#header {
    border-bottom: none;
}
div#footer {
    border-top: none;

}

two-column-ie.css:

Code:

div#content {
    position: relative;
    top: 3px
}
div#first-column {
    top: 3px;
}

div#container {
    margin-top: -3px;
    margin-bottom: -3px;
}

Shivanand