Nested DIVs - background color overlap?

Discussion in 'CSS' started by JennyWren, Nov 5, 2007.

0
  1. #1
    If, for example, I have a div that encompasses a whole section of my page with a background colour that differs from the background colour of my <body>, and then there is a div INSIDE that div with NO background, why does the nested div show the <body> background colour (instead of the div behind it) in Firefox, but not in IE? I've found a workaround - place a "footer" that clears everything INSIDE the outer div, but this seems kludgy. Suggestions?
     
    JennyWren, Nov 5, 2007 IP
  2. nix

    nix Guest

    Messages:
    116
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    post your css/html code or a link to the site... i just tried out nested divs and its working fine in firefox,maybe theres something wrong with your code, and you mentioned clearing everything by footer, so i am guessing it MAY be a float problem...
     
    nix, Nov 6, 2007 IP
  3. soulscratch

    soulscratch Well-Known Member

    Messages:
    964
    Likes Received:
    45
    Best Answers:
    0
    Trophy Points:
    155
    #3
    I have an idea. Provide a link.
     
    soulscratch, Nov 6, 2007 IP
  4. JennyWren

    JennyWren Peon

    Messages:
    21
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #4
    JennyWren, Nov 6, 2007 IP
  5. nix

    nix Guest

    Messages:
    116
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    wow, i worked on the file and its like magic, the colors are all different even when i remove background property from all except body, its shows me outerdiv lightblue, column1 pale orange, and column 2 pale purple.... bg is dark grey.... im not exactly sure but setting doctype declarations will deal with the problem
     
    nix, Nov 6, 2007 IP
  6. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #6
    Ok, first off PART of IE's behavior is correct. There is no float on the "Ok, we're inside" text - floats are display:block inherently so the 'column 1' SHOULD appear below that text.

    BUT, IE wrapping the entire thing is the INCORRECT behavior - non-floating containers by the specification are NOT supposed to expand to contain floats. Both of your div's are floating, so the outer box shouldn't expand. This is a well documented and common issue I often have to code around... though MOST of the time that is in fact the behavior I want in all browsers.

    To make other browsers do what IE is doing in terms of stretching the container, you can make the outer container float, or set overflow:hidden or overflow:auto... Problem with the float is, well, sometimes you want 100% with padding which you can't do with float... the problem with overflow being if you need to set haslayout, height won't auto-switch to auto.

    I guess the question becomes which behavior do you WANT? IE style or RoW (Rest of World)
     
    deathshadow, Nov 7, 2007 IP