Margin Collapsing

[creativeastro]

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:

• Home
• Gallery
• Membership
• Fitness Tips
• Contact
• Join Now

Here is my html:

Olympia Fitness Centre : Currently Under Construction

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

[darkkiller]

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

[creativeastro]

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

[creativeastro]

Hie

Is there anyone who can help?

[creativeideas]

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.

[creativeastro]

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

[Author]

Posts