Wrox Programmer Forums

Need to download code?

View our list of code downloads.

Go Back   Wrox Programmer Forums > Web Programming > CSS > BOOK: CSS Instant Results
Password Reminder
Register
Register | FAQ | Members List | Calendar | 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 tens of thousands of software programmers and website developers including Wrox book authors and readers. As a guest, you can read any forum posting. By joining today you can post your own programming questions, respond to other developersí questions, and eliminate the ads that are displayed to guests. Registration is fast, simple and absolutely free .
DRM-free e-books 300x50
Reply
 
Thread Tools Display Modes
  #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
Reply With Quote
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are Off
Pingbacks are On
Refbacks are Off

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 10:13 PM
2-column layout kennethjaysone CSS Cascading Style Sheets 2 January 12th, 2008 05: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 09:02 AM



All times are GMT -4. The time now is 02:08 AM.


Powered by vBulletin®
Copyright ©2000 - 2017, Jelsoft Enterprises Ltd.
© 2013 John Wiley & Sons, Inc.