Grow your CSS skills. Land your dream job.

Margin Collapsing

  • # April 18, 2009 at 2:03 am

    Hie
    I am having problems with margin collapse on my site. I have spent hours trying to solve it but still cannot solve the problem. The margin is collapsing in Internet Explorer, Safari and Firefox.

    I have noticed the problem is with the header which is a php include. I am self taught so there might be something I am missing which may be really basic so please bear with me.

    I have tried adding padding top and bottom of 1px, floated the div as well, right and left following advice from other sites.

    When I had margin collapse before it worked when I added padding but this time nothing seems to work.

    Here is the Header code:

    Code:

    Here is my html:

    < ?php include("includes/header-nav.php"); ?>

    Olympia Fitness Centre

    Olympia Fitness Centre : Currently Under Construction

    < ?php include("includes/footer.php"); ?>

    And here is the css:
    body{
    margin:0px auto;
    width:100%;}

    /***************************The wrap div **************/
    .all-content{width:100%;}

    /*******************************END************************/

    /*************HEADER AND navigation for the main header */
    .logo{width:239px;
    height:99px;
    float:left;
    margin:-10px 40px 5px 40px;}

    #header{
    background-image:url(images/headerbg.jpg);
    background-repeat:repeat-x;
    clear:both;
    width:100%;
    height:130px;}

    #header-nav{float:right;
    margin:10px 10px;
    height:100px;
    width:600px;}
    .nav li
    {display:inline;
    list-style-type: none;
    padding-right: 10px;
    padding-left:10px;

    }
    .nav li a{text-decoration: none;
    font-family:Verdana, Geneva, sans-serif;
    font-size:12px;
    font-weight:bold;
    color: #d3d1cf;}
    .nav li a:hover{color:#f14017}
    /*******************MEN IMAGE***************************/
    .men{
    width:647px;
    height:337px;
    margin:5px 80px;

    }
    #main-image{
    background-color:#000;
    height:350px;
    width:100%;
    }

    Any help much appreciated.
    Regards

    # April 18, 2009 at 10:28 am

    This is The Double Margin Bug. You can fix on this link:
    http://css-tricks.com/ie-css-bugs-thatl … very-time/

    # April 18, 2009 at 3:07 pm

    Thank you for your prompt reply, I tried what the article says I should do, e.g use padding instead of margin and instead of floating elements push them to the relevant side by adding padding to the parent but I did not achieve the desired results, maybe I am doing it wrong so may you please let me know where exactly to add the code and what to remove. I have put the code back as it was, so it is still the same code I posted above.

    Thanks

    # April 20, 2009 at 5:50 pm

    Hie

    Is there anyone who can help?

    # April 21, 2009 at 3:17 am

    hi,

    i just saw your code and i think there is a problem because of this class id="main-image" just delete this class from your stle sheet and make a new class and only define the black background color nothing else.. may be your problem get solved.

    # April 23, 2009 at 4:22 am

    Thank you but I finally managed to sort the problem out with some relative positioning and a bit more research online.

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".