Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5

Thread: Nested ID's

  1. #1
    New Coder
    Join Date
    Mar 2007
    Posts
    29
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Nested ID's

    Why does the following not work in IE (it works fine in firefox)

    Code:
    #container{
       margin: 0;
       padding 0;
    }
    
    #content{
       margin: 200px 20px 50px 210px;
    }
    
    ...
    ...
    ...
    
    <div id="container">
       <div id="content">Bla Bla Bla</div>
       bla bla bla
    </div>
    And here is the page if you want to see the full page.
    http://vangoessalon.com/test/

    In firefox this works as I expected, the outer div had no margin or padding. While the inner div had the specified margins.

    BUT in IE(both 6 and 7), the inner div has margins of 0. Removing the margin declaration for #container fixes the problem, but the issue remains why am I unable to override the element's parents' css.

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,480
    Thanks
    6
    Thanked 981 Times in 954 Posts
    For one it may help if you remove the XML declaration at the top that is putting IE into quirks mode. The doctype should be the first thing in the document.

    I can’t imagine why it shouldn’t work in IE, though. Could it be collapsing margins? Nah, don’t think so…

    See what removing the XML line does.

  • #3
    New Coder
    Join Date
    Mar 2007
    Posts
    29
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I removed the xml. Still no go.....

  • #4
    New Coder
    Join Date
    Mar 2007
    Posts
    29
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by acroporas View Post
    I removed the xml. Still no go.....
    It does seem to be a collapsing margin issue.

    Changing #container to:
    padding: 1px;
    margin: -2px;
    width: 100%;

    fixed the problem. The key was the width, with out width declaration it collapsed the margin in IE. I don't fully understand why the width was required in IE, but I'm moving on.

  • #5
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,480
    Thanks
    6
    Thanked 981 Times in 954 Posts
    Probably an issue due to which IE always causes problems: hasLayout


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •