SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2006
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE7 woes... fixed width 3 col layout

    Hi all

    I have 3 columns all within a fixed width. The right column (float:right) is wayyyy out to the right when viewed in IE7. Any ideas?

    Code:
    body {
    width:760px;
    margin:10px;
    font-size:80%;
    font-family:'Lucida Grande',Verdana,sans-serif;
    }
    
    h1 {
    font-size:150%;
    }
    h2 {
    font-size:140%;
    }
    h3 {
    font-size:120%;
    }
    
    p {
    font-size:100%;
    line-height:150%;
    }
    
    #masthead {
    margin:0 0 10px 0;
    padding:10px;
    border:1px solid #000;
    background-color:#CCC;
    width:738px;
    }
    
    #content {
    margin-left:200px;
    margin-right:200px;
    margin-bottom:10px;
    padding:10px;
    border:1px solid #000;
    width:338px;
    }
    
    #sidebar_a {
    float:left;
    margin-bottom:10px;
    padding:10px;
    border:1px solid #000;
    width:158px;
    
    }
    
    
    #sidebar_b {
    float:right;
    margin-bottom:10px;
    padding:10px;
    border:1px solid #000;
    width:158px;
    
    }
    
    #footer {
    clear:both;
    padding:10px;
    border:1px solid #000;
    background-color:#CCC;
    width:738px;
    
    }
    Heres the basic 3 column html

    HTML Code:
    <html>
    <head>
    <title>Fixed Floated 3 Column Layout</title>
    <link rel='stylesheet' media="screen" type='text/css' href='ff3c.css' />
    </head>
    <body>
    <div id="masthead">
    <h1>Masthead</h1>
    </div>
    <div id="sidebar_a">
    <ul>
    <li>sidebar a</li>
    <li>item one</li>
    <li>item two</li>
    <li>item three</li>
    <li>item four</li>
    <li>item five</li>
    </ul>
    </div>
    <div id="sidebar_b">
    <ul>
    <li>sidebar b</li>
    <li>item one</li>
    <li>item two</li>
    <li>item three</li>
    <li>item four</li>
    <li>item five</li>
    </ul>
    </div>
    <div id="content">
    <h2>Content</h2>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc quis nibh. Morbi sit amet risus. Donec sit amet massa nonummy massa semper porttitor. Aliquam vel quam. Vestibulum laoreet elementum eros. Ut gravida arcu at pede. Phasellus enim lorem, ultricies nec, molestie rhoncus, auctor eget, odio. Suspendisse mollis massa nec odio. Fusce eget enim. Quisque at tortor. Duis sed ante. Suspendisse lobortis erat venenatis lectus lobortis ultricies. Praesent ac dolor ut eros ornare auctor. Quisque hendrerit, nisl a porta pretium, urna nisl adipiscing nunc, at fermentum nunc elit et sem. Morbi lorem lacus, rutrum a, commodo eu, sagittis ac, erat. Vestibulum mauris felis, aliquam sit amet, porttitor posuere, blandit adipiscing, velit.
    </div>
    <div id="footer">
    <h2>Footer</h2>
    </div>
    </body>
    </html>
    Any help would be much appreciated. Ive tried it in Firefox and it looks fine...Just the pesky IE7...

  2. #2
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Haven't tested your code but it looks like a classic quirks mode problem.

    Without a doctype, your page will render in quirks mode in all IE versions.

    Change the top of your page to the following so that it has a doctype, charset and lang and also remove the "/" from the stylesheet include unless you're using an XHTML doctype.

    Also remember to run your page through http://validator.w3.org as it'll usually highlight these issues

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <title>Fixed Floated 3 Column Layout</title>
    <link rel="stylesheet" media="screen" type="text/css" href="ff3c.css">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>

  3. #3
    SitePoint Enthusiast
    Join Date
    Mar 2006
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks for the info CSS much appreciated

  4. #4
    SitePoint Enthusiast
    Join Date
    Mar 2006
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Update have tested it and it works - thanks again.... I'll even let you off for being a Man U fan in Derby

  5. #5
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Glad it sorted your problem, you'll need a hack if you want it to work in IE5.x which there are a few methods but depends whether you want to support it or not. (Personally I'd probably take the approach that as long as the site is usable then pixel perfection isn't important unless there are good reasons for it or client demands it).

    Heh, you're not the first to point out the United, Derby link

  6. #6
    SitePoint Enthusiast
    Join Date
    Mar 2006
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Am familiar with some of the 5.x hacks (box model hack etc). Thanks for the info. I found quite a few bits 'n bobs on positioniseverything.net


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •