CSS Layout Issue in IE6 - Example in Book Fails

Discussion in 'HTML' started by Jim Carr, Dec 14, 2007.

  1. Jim Carr

    Jim Carr Guest

    I'm learning CSS (and loving it), but an example in "Designing Without
    Tables Using CSS" fails in IE6. It works as I expect and understand in
    IE7 and Firefox 2. I have whittled down the example to just the basics.

    http://www.chesapeaketempe.com/fixedwidth.html
    http://www.chesapeaketempe.com/fixedwidth.css

    In IE7 the yellow sidebar appears to the left of the green content
    section. This is what I expect.

    In IE6 it picks up the 200px left margin and therefore aligns with the
    content section. This appears to me to be a bug. Perhaps someone can
    explain to me what I'm missing or a workaround to the bug.

    fixedwidth.css

    body {
    margin: 0;
    padding: 0;
    min-width: 740px;
    background-color: black;

    }
    #wrapper {
    text-align: left;
    width: 740px;
    margin-left: auto;
    margin-right: auto;
    background-color: blue;
    padding: 10px;
    }

    #content {
    background-color: green;
    border: 1px solid #f0f0f0;
    padding: 0;
    }
    #content .inner {
    margin: 30px;
    }


    #content-wrapper {
    margin: 0 0 0 200px;
    }
    #main {
    position: relative;
    }
    #extras
    {
    position:absolute;
    background-color:Yellow;
    top: 0;
    left: 0;
    width: 180px;
    border: 1px solid #f0f0f0;
    }



    fixedwidth.html

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Footbag Freaks</title>
    <meta http-equiv="Content-Type" content="text/html;
    charset=iso-8859-1" />
    <link rel="stylesheet" type="text/css" href="fixedwidth.css" />
    </head>
    <body>
    <div id="wrapper">
    <div id="header">
    <p id="tagline">The Home of the Hack</p>
    </div> <!-- header -->
    <div id="main">
    <div id="content-wrapper">
    <div id="content">
    <div class="inner">

    </div>
    </div> <!-- content -->
    </div> <!-- content-wrapper -->
    <div id="extras" >
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
    enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
    aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
    in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
    officia deserunt mollit anim id est laborum.</p>
    </div> <!-- extras -->
    </div> <!-- main -->
    </div> <!-- wrapper -->
    </body>
    </html>
     
    Jim Carr, Dec 14, 2007
    #1
    1. Advertising

  2. Jim Carr

    Jim Carr Guest

    Jim Carr wrote:
    > I'm learning CSS (and loving it), but an example in "Designing Without
    > Tables Using CSS" fails in IE6. It works as I expect and understand in
    > IE7 and Firefox 2. I have whittled down the example to just the basics.


    Fixed this by using the HasLayout workaround within some of the parent
    containers.
     
    Jim Carr, Dec 14, 2007
    #2
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Eric
    Replies:
    4
    Views:
    781
    clintonG
    Dec 24, 2004
  2. Guybrush Threepwood

    Table-based layout to CSS layout

    Guybrush Threepwood, Jun 6, 2006, in forum: HTML
    Replies:
    20
    Views:
    1,051
  3. Replies:
    1
    Views:
    643
    John Timney \(MVP\)
    Jun 19, 2006
  4. Habib

    Css-Layout vs Table-Layout

    Habib, Jun 19, 2006, in forum: HTML
    Replies:
    15
    Views:
    1,054
    Wÿrm
    Jun 20, 2006
  5. Ben Woodward

    CSS spacing issue in IE6?

    Ben Woodward, Mar 20, 2007, in forum: HTML
    Replies:
    1
    Views:
    463
    mbstevens
    Mar 20, 2007
Loading...

Share This Page