newbie: css: box problem in IE6

Discussion in 'HTML' started by Jeff, Nov 28, 2005.

  1. Jeff

    Jeff Guest

    Hey!

    When running this code in IE6, the submenu (see code below) Div is placed
    beneath the content DIV (in other words the submenu DIV disapear under the
    content DIV), that is strange because in Opera the submenu Div is placed on
    the left side of the content DIV. The purpose of it is to create a 3 column
    layout... Can anyone please give me some advice on what I must do to make
    the submenu appear on the left side (when using IE6, tips on IE5 would be
    great too)
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

    index.php:
    "http://www.w3.org./TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head>
    <link rel="StyleSheet" type="text/css" href="styles.css" media="screen" />
    </head>
    <body bgcolor=#8A2BE2>
    <div id="gui">
    <div id="header">
    <p>header</p>
    </div>
    <div id="container">
    <div id="submenu">
    <p>submenu</p>
    </div>
    <div id="calendar">
    <p>calendar</p>
    </div>
    <div id="content">
    <p>content</p>
    </div>
    </div>
    <div id="footer">
    <p>footer</p>
    </div>
    </div>
    </body>
    </html>

    styles.css:
    #calendar {
    background-color:#DDF;
    /* border:2px solid #00C; */
    position:absolute;
    right:0px;
    top:0px;
    width:175px;
    }

    #submenu {
    background-color:#FFFFFF;
    position:absolute;
    left:0px;
    top:0px;
    width:175px;
    text-align:left;
    }

    #header {
    position:relative;
    background-color:#FFFFFF;
    height:55px;
    }

    #footer {
    text-align:center;
    background-color:#FDD;
    border:1px solid #C00;
    }

    #content {
    margin:0 190px;
    background-color:#FFFFFF;
    position:relative;
    }

    #container {
    background-color:#FFD000;
    position:relative;
    }

    #gui {
    height:100%;
    margin-left:5%;
    margin-right:5%;
    background-color:#FFD000;
    position:relative;
    }

    If I change #container to this: then its working on IE6, but not on Opera:
    With this settings the footer DIV will on Opera get overwritten by the
    content of the content DIV - if the content of the content DIV's height is
    higher than 400px
    #container {
    height:400px;
    background-color:#FFD000;
    position:relative;
    }

    Please give me some tips abot what I must do to get the submenu DIV position
    correctly (left for the content area)

    Best Regards

    Jeff
    Jeff, Nov 28, 2005
    #1
    1. Advertising

  2. Jeff

    BootNic Guest

    > "Jeff" <> wrote:
    > news:p....
    >
    > Hey!
    >
    > When running this code in IE6, the submenu (see code below) Div is
    > placed beneath the content DIV (in other words the submenu DIV
    > disapear under the content DIV), that is strange because in Opera
    > the submenu Div is placed on the left side of the content DIV. The
    > purpose of it is to create a 3 column layout... Can anyone please
    > give me some advice on what I must do to make the submenu appear on
    > the left side (when using IE6, tips on IE5 would be great too)
    > <snip>
    > If I change #container to this: then its working on IE6, but not on
    > Opera: With this settings the footer DIV will on Opera get
    > overwritten by the content of the content DIV - if the content of
    > the content DIV's height is higher than 400px
    > <snip>
    > Please give me some tips abot what I must do to get the submenu DIV
    > position correctly (left for the content area)


    I do not know what Opera will do to this, but it appears more or less
    the same in IE6, Mozilla 1.7.12, Firefox 0.8.0 and Netscape 7.2. .

    If nothing else maybe this will give you a different approach to a
    solution.


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="content-type" content=
    "text/html; charset=windows-1252" />
    <style type="text/css">
    /*<![CDATA[*/
    body{
    width:800px;
    /*margin: top right bottom left*/
    margin: 15px auto 10px auto;
    }

    p{
    margin: 0;
    padding: 10px;
    }

    #calendar {
    background-color: #DDDDFF;
    color: #000000;
    float: right;
    width: 175px;
    }

    #container {
    background-color: #FFD000;
    color: #000000;
    }

    #container div{
    margin-top: 0;
    }

    #content {
    background-color: #FFFF99;
    color: #000000;
    margin-bottom: 0;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    width: 400px;
    }

    #footer {
    background-color: #FFDDDD;
    border: 1px solid #CC0000;
    color: #000000;
    text-align: center;
    }

    #gui {
    background-color: #FFD000;
    color: #000000;
    margin: auto;
    width: 760px;
    }

    #header {
    background-color: #FFFFFF;
    color: #000000;
    height: 55px;
    }

    #submenu {
    background-color: #FF9999;
    color: #000000;
    float: left;
    text-align: left;
    width: 175px;
    }
    /*]]>*/
    </style>

    <title></title>
    </head>

    <body bgcolor="#8A2BE2">
    <div id="gui">
    <div id="header">
    <p>header</p>
    </div>

    <div id="container">
    <div id="submenu">
    <p>submenu</p>
    </div>

    <div id="calendar">
    <p>calendar</p>
    </div>

    <div id="content">
    <p>content</p>
    </div>
    </div>

    <div id="footer">
    <p>footer</p>
    </div>
    </div>

    <p><a href="http://validator.w3.org/check?uri=referer"><img src=
    "http://www.w3.org/Icons/valid-xhtml10" alt=
    "Valid XHTML 1.0 Transitional" height="31" width="88" /></a><br />
    <a href="http://jigsaw.w3.org/css-validator/"><img src=
    "http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS!"
    height="31" width="88" /></a></p>
    </body>
    </html>

    --
    BootNic Monday, November 28, 2005 9:52 AM

    Humor is emotional chaos remembered in tranquility.
    *James Thurber*
    BootNic, Nov 28, 2005
    #2
    1. Advertising

  3. Jeff

    Jeff Guest

    Thanks that helped me, but I have a few questions related to the example you
    gave me:
    - if I for example add more data to the submenu div, the submenu div will
    eventually overwrite the footer, What css settings must I do so that if more
    data is entered in the submenu the footer isn't overwritten....so that the
    footer always represent the end of the document....?

    - What is this: /*]]>*/

    Best Regards

    Jeff




    "BootNic" <> wrote in message
    news:bREif.2534$...
    > "Jeff" <> wrote:
    > news:p....
    >
    > Hey!
    >
    > When running this code in IE6, the submenu (see code below) Div is
    > placed beneath the content DIV (in other words the submenu DIV
    > disapear under the content DIV), that is strange because in Opera
    > the submenu Div is placed on the left side of the content DIV. The
    > purpose of it is to create a 3 column layout... Can anyone please
    > give me some advice on what I must do to make the submenu appear on
    > the left side (when using IE6, tips on IE5 would be great too)
    > <snip>
    > If I change #container to this: then its working on IE6, but not on
    > Opera: With this settings the footer DIV will on Opera get
    > overwritten by the content of the content DIV - if the content of
    > the content DIV's height is higher than 400px
    > <snip>
    > Please give me some tips abot what I must do to get the submenu DIV
    > position correctly (left for the content area)


    I do not know what Opera will do to this, but it appears more or less
    the same in IE6, Mozilla 1.7.12, Firefox 0.8.0 and Netscape 7.2. .

    If nothing else maybe this will give you a different approach to a
    solution.


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="content-type" content=
    "text/html; charset=windows-1252" />
    <style type="text/css">
    /*<![CDATA[*/
    body{
    width:800px;
    /*margin: top right bottom left*/
    margin: 15px auto 10px auto;
    }

    p{
    margin: 0;
    padding: 10px;
    }

    #calendar {
    background-color: #DDDDFF;
    color: #000000;
    float: right;
    width: 175px;
    }

    #container {
    background-color: #FFD000;
    color: #000000;
    }

    #container div{
    margin-top: 0;
    }

    #content {
    background-color: #FFFF99;
    color: #000000;
    margin-bottom: 0;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    width: 400px;
    }

    #footer {
    background-color: #FFDDDD;
    border: 1px solid #CC0000;
    color: #000000;
    text-align: center;
    }

    #gui {
    background-color: #FFD000;
    color: #000000;
    margin: auto;
    width: 760px;
    }

    #header {
    background-color: #FFFFFF;
    color: #000000;
    height: 55px;
    }

    #submenu {
    background-color: #FF9999;
    color: #000000;
    float: left;
    text-align: left;
    width: 175px;
    }
    /*]]>*/
    </style>

    <title></title>
    </head>

    <body bgcolor="#8A2BE2">
    <div id="gui">
    <div id="header">
    <p>header</p>
    </div>

    <div id="container">
    <div id="submenu">
    <p>submenu</p>
    </div>

    <div id="calendar">
    <p>calendar</p>
    </div>

    <div id="content">
    <p>content</p>
    </div>
    </div>

    <div id="footer">
    <p>footer</p>
    </div>
    </div>

    <p><a href="http://validator.w3.org/check?uri=referer"><img src=
    "http://www.w3.org/Icons/valid-xhtml10" alt=
    "Valid XHTML 1.0 Transitional" height="31" width="88" /></a><br />
    <a href="http://jigsaw.w3.org/css-validator/"><img src=
    "http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS!"
    height="31" width="88" /></a></p>
    </body>
    </html>

    --
    BootNic Monday, November 28, 2005 9:52 AM

    Humor is emotional chaos remembered in tranquility.
    *James Thurber*
    Jeff, Nov 28, 2005
    #3
  4. Jeff

    BootNic Guest

    > "Jeff" <> wrote:
    > news:....
    >
    > Thanks that helped me, but I have a few questions related to the
    > example you gave me:
    > - if I for example add more data to the submenu div, the submenu
    > div will eventually overwrite the footer, What css settings must I
    > do so that if more data is entered in the submenu the footer isn't
    > overwritten....so that the footer always represent the end of the
    > document....?
    >
    > - What is this: /*]]>*/

    that is the closing part of /*<![CDATA[*/
    >
    >> "BootNic" <> wrote in message
    >> news:bREif.2534$...

    <snip>
    >> #footer {
    >> background-color: #FFDDDD;
    >> border: 1px solid #CC0000;
    >> color: #000000; text-align: center; }

    replace ^^^ with the following should take care of it.
    #footer {
    background-color: #FFDDDD;
    border: 1px solid #CC0000;
    color: #000000;
    text-align: center;
    clear: both;
    width:760px;
    }

    --
    BootNic Monday, November 28, 2005 5:25 PM

    I try to take one day at a time, but sometimes several days attack me at once.
    *Jennifer Unlimited*
    BootNic, Nov 28, 2005
    #4
  5. Jeff

    Toby Inkster Guest

    Toby Inkster, Nov 28, 2005
    #5
    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. Ivor O'Connor
    Replies:
    4
    Views:
    845
    Isofarro
    Nov 25, 2003
  2. Gnarlodious
    Replies:
    4
    Views:
    17,588
    elizas
    May 5, 2010
  3. Peter Mount
    Replies:
    4
    Views:
    946
    Peter Mount
    Jan 31, 2006
  4. Pugi!
    Replies:
    0
    Views:
    237
    Pugi!
    Feb 5, 2007
  5. timothytoe
    Replies:
    4
    Views:
    153
Loading...

Share This Page