1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.
  2. Better Analytics for WordPress Get It Free

Nested DIVs - background color overlap?

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

  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:
    962
    Likes Received:
    45
    Best Answers:
    0
    Trophy Points:
    105
    #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
  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 Illustrious Member

    Messages:
    6,917
    Likes Received:
    1,065
    Best Answers:
    171
    Trophy Points:
    445
    #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