Wrox Programmer Forums
Go Back   Wrox Programmer Forums > Web Programming > CSS > BOOK: CSS Instant Results
| Search | Today's Posts | Mark Forums Read
BOOK: CSS Instant Results
This is the forum to discuss the Wrox book CSS Instant Results by Richard York; ISBN: 9780471751267
Welcome to the p2p.wrox.com Forums.

You are currently viewing the BOOK: CSS Instant Results section of the Wrox Programmer to Programmer discussions. This is a community of software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
  #1 (permalink)  
Old July 7th, 2008, 03:47 AM
Authorized User
 
Join Date: Feb 2007
Location: Hyderabad, Andhra Pradesh, India.
Posts: 14
Thanks: 0
Thanked 0 Times in 0 Posts
Default IE 6 & 7 issues in two column layout

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
__________________
Shivanand


Similar Threads
Thread Thread Starter Forum Replies Last Post
3 column layout acevision7 BOOK: Professional CSS: Cascading Style Sheets for Web Design 0 February 24th, 2008 11:13 PM
2-column layout kennethjaysone CSS Cascading Style Sheets 2 January 12th, 2008 06:44 AM
IE layout issues with tables and border. dekemcaffee Javascript 1 October 9th, 2007 04:57 PM
Center two column layout nloding CSS Cascading Style Sheets 1 June 21st, 2006 12:11 PM
three-column layout help DSteven CSS Cascading Style Sheets 8 December 28th, 2004 10:02 AM





Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
Copyright (c) 2020 John Wiley & Sons, Inc.