background color not working as expected

Discussion in 'HTML' started by asaffos, Dec 26, 2007.

  1. asaffos

    asaffos Guest

    Hi,

    In the code below I have a certain color for the body, a different one
    for the content_body. For some reason although the DIV for the
    content_body has all of the pages content in it the background color
    appears in a certain part on the top of the page. Why is that? (the
    css is also below)

    <!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">

    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <title>
    </title>
    <link rel="stylesheet" href="style.css" type="text/css"
    media="screen" />
    </head>
    <body>
    <div id="body_wrapper">
    <div id="content_body">
    <div id="nav_menu">



    </div>


    <div id="right_col">

    </div>
    </div>
    </div>
    </body>
    </html>
    ******************************
    CSS
    ******************************
    body {
    padding: 10px 0px 10px;
    background-color: #484848;
    color: #fff;
    font-family: verdana, arial, sans-serif;
    font-size: 12px;
    text-align: center;
    }
    #body_wrapper {
    margin: 0px auto;
    padding: 2px 0px;
    width: 777px;
    background-color: #fcfcfc;
    color: inherit;
    text-align: left;
    }
    #content_body {
    margin: 0px 2px;
    padding: 17px 12px 15px 15px;
    background-color: #dddacc;
    border-bottom: #fff 2px solid;
    color: #000000;
    text-align: left;
    }
    #nav_menu {
    margin: 72px 12px 10px 2px;
    width: 180px;
    background-color: #dddaaa;
    color: #fff;
    border-bottom: #fff 2px solid;
    font-family: arial, sans-serif;
    font-weight: bold;
    letter-spacing: 1px;
    text-transform: uppercase;
    float:left;
    }

    #right_col
    {

    width:540px;
    float:right;
    }
     
    asaffos, Dec 26, 2007
    #1
    1. Advertising

  2. asaffos

    dorayme Guest

    In article
    <
    m>,
    asaffos <> wrote:

    > Hi,
    >
    > In the code below I have a certain color for the body, a different one
    > for the content_body. For some reason although the DIV for the
    > content_body has all of the pages content in it the background color
    > appears in a certain part on the top of the page. Why is that? (the
    > css is also below)
    >
    > <!DOCTYPE html


    ....

    In what you supply, there is nothing in any of the divs, the
    backgrounds are as you supplied them in your css. Perhaps you can
    go to:

    http://netweaver.com.au/alt/assafos.html

    which is essentially your own mark up with some content added and
    some more bg colours and colors to show your arrangement better.
    What is it that *you* are puzzled by in this (as distinct from
    quite a few things many might be puzzled by)

    --
    dorayme
     
    dorayme, Dec 26, 2007
    #2
    1. Advertising

  3. asaffos

    asaffos Guest

    On Dec 26, 10:54 pm, dorayme <> wrote:
    > In article
    > <
    > m>,
    >
    >  asaffos <> wrote:
    > > Hi,

    >
    > > In the code below I have a certain color for the body, a different one
    > > for the content_body. For some reason although the DIV for the
    > > content_body has all of the pages content in it the background color
    > > appears in a certain part on the top of the page. Why is that? (the
    > > css is also below)

    >
    > > <!DOCTYPE html

    >
    > ...
    >
    > In what you supply, there is nothing in any of the divs, the
    > backgrounds are as you supplied them in your css. Perhaps you can
    > go to:
    >
    > http://netweaver.com.au/alt/assafos.html
    >
    > which is essentially your own mark up with some content added and
    > some more bg colours and colors to show your arrangement better.
    > What is it that *you* are puzzled by in this (as distinct from
    > quite a few things many might be puzzled by)
    >
    > --
    > dorayme


    Hi,

    Thanks for the help.

    I'm surprised from the face that the background color of the content
    body isn't inherited automaticlly in the other divs that are inside
    content body (for example right_col).

    Thanks
     
    asaffos, Dec 28, 2007
    #3
  4. asaffos

    rf Guest

    "asaffos" <> wrote in message
    news:...

    I'm surprised from the face that the background color of the content
    body isn't inherited automaticlly in the other divs that are inside
    content body (for example right_col).

    URL? Or do you just want us all to guess?

    --
    Richard.
     
    rf, Dec 28, 2007
    #4
  5. asaffos

    GTalbot Guest

    On 26 déc, 15:54, dorayme <> wrote:
    > In article
    > <
    > m>,



    > http://netweaver.com.au/alt/assafos.html
    >
    > which is essentially your own mark up with some content added and
    > some more bg colours and colors to show your arrangement better.



    Dorayme,

    I examined your testpage (thank you for providing it) and figured out
    that this was bug #46 and bug #66 at this page:

    http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs/

    The background-color issue is just a consequence of the way IE7
    (*incorrectly, wrongly*) renders floated elements when the container
    has a specified width. It is definitely due to incorrect
    implementations of float feature by Internet Explorer 7 (and most
    likely IE6 too).

    Regards and season's greetings, Gérard
     
    GTalbot, Dec 28, 2007
    #5
  6. asaffos

    dorayme Guest

    In article
    <
    m>,
    asaffos <> wrote:

    > On Dec 26, 10:54 pm, dorayme <> wrote:
    > > In article
    > > <
    > > m>,
    > >
    > >  asaffos <> wrote:
    > > > Hi,

    > >
    > > > In the code below I have a certain color for the body, a different one
    > > > for the content_body. For some reason although the DIV for the
    > > > content_body has all of the pages content in it the background color
    > > > appears in a certain part on the top of the page. Why is that? (the
    > > > css is also below)

    > >
    > > > <!DOCTYPE html

    > >
    > > ...
    > >
    > > In what you supply, there is nothing in any of the divs, the
    > > backgrounds are as you supplied them in your css. Perhaps you can
    > > go to:
    > >
    > > http://netweaver.com.au/alt/assafos.html
    > >
    > > which is essentially your own mark up with some content added and
    > > some more bg colours and colors to show your arrangement better.
    > > What is it that *you* are puzzled by in this (as distinct from
    > > quite a few things many might be puzzled by)
    > >
    > > --
    > > dorayme

    >
    > Hi,
    >
    > Thanks for the help.
    >
    > I'm surprised from the face that the background color of the content
    > body isn't inherited automaticlly in the other divs that are inside
    > content body (for example right_col).
    >
    > Thanks


    OK, fair enough. But it can make a bit of sense to you if you
    form a picture of how floats are not "in" their containers in any
    intuitive way.

    If you go to:

    http://netweaver.com.au/alt/assafos.html

    and get rid of the wrapper (it seems irrelevant to *this*
    surprise of yours) and get rid of all margins and paddings, get
    rid of the backgrounds on the floats and stick distinctive
    borders on all things and make the body color and background
    distinctive, (and you may as well be rid of the right float too
    for this exercise), and while we are at it, lets put in a clear
    gif that takes up a lot of the width so that the float can't jut
    in, you will see how the floats should not have *any* part of
    themselves "housed" by the parent.

    http://netweaver.com.au/alt/assafos1.html

    The parent does not cover them with its height. They overflow.
    They have a certain queer independence and and while they inherit
    the color, their backgrounds are transparent. If you look at the
    above url in IE6 it is easy to imagine why you might be
    surprised. <g>

    Messing about with your surprise has given me thoughts to expand
    a few things in my hobby at http://netweaver.com.au/floatHouse/

    (Please don't groan everyone... and Boji, stop yawning!

    Time for a swim, this time it will be Bronte and back to get
    ready for a NYE bash (at friends who cooks divine Greek) and the
    fireworks at Glebe. This year, I understand, Glebe will be a
    barge point for the Sydney harbour fireworks. Great! Happy New
    Year everyone!)

    --
    dorayme
     
    dorayme, Dec 31, 2007
    #6
  7. asaffos

    dorayme Guest

    In article
    <
    >,

    GTalbot <> wrote:

    > On 26 déc, 15:54, dorayme <> wrote:
    > > In article
    > > <
    > > m>,

    >
    >
    > > http://netweaver.com.au/alt/assafos.html
    > >
    > > which is essentially your own mark up with some content added and
    > > some more bg colours and colors to show your arrangement better.

    >
    >
    > Dorayme,
    >
    > I examined your testpage (thank you for providing it) and figured out
    > that this was bug #46 and bug #66 at this page:
    >
    > http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs/
    >
    > The background-color issue is just a consequence of the way IE7
    > (*incorrectly, wrongly*) renders floated elements when the container
    > has a specified width. It is definitely due to incorrect
    > implementations of float feature by Internet Explorer 7 (and most
    > likely IE6 too).
    >
    > Regards and season's greetings, Gérard


    I have been meaning to get back to you on this. But I wanted to
    fire up my Win box to see the bugs you mention. Today I had a
    chance. I was thinking the OP's concerns were something else,
    more to do with the relation of floats to their containers and
    what things they inherit. I was taking a look at your reference
    to bug #46, for example, on my Winbox and IE6 and the case is
    rather different to the OP's.

    But it was nevertheless informative to look at the cases you
    mention.

    Best wishes to you too.

    --
    dorayme
     
    dorayme, Jan 1, 2008
    #7
    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. Kevin Yu
    Replies:
    8
    Views:
    535
  2. Monty
    Replies:
    3
    Views:
    4,821
    Monty
    Aug 19, 2004
  3. fig000
    Replies:
    0
    Views:
    4,555
    fig000
    Sep 6, 2004
  4. Kamaljeet Saini
    Replies:
    0
    Views:
    427
    Kamaljeet Saini
    Feb 13, 2009
  5. Replies:
    1
    Views:
    272
    marss
    Feb 14, 2007
Loading...

Share This Page