Forums

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:

<div id=\"header\">
<a href=\"index.php\"><img src=\"images/logo.png\" class=\"logo\" alt=\"Olympia Fitness Centre logo\" /></a>
<div id=\"header-nav\">
<ul class=\"nav\">
<li><a href=\"index.php\">Home</a></li>
<li><a href=\"gallery.php\">Gallery</a></li>
<li><a href=\"member.php\">Membership</a></li>
<li><a href=\"tips.php\">Fitness Tips</a></li>
<li><a href=\"contact.php\">Contact</a></li>
<li class=\"last\"><a href=\"join.php\">Join Now</a></li>
</ul></div>
</div>

Here is my html:
<div class=\"all-content\">
<?php include(\"includes/header-nav.php\"); ?>
<div id=\"main-image\"><img src=\"images/men-image.jpg\" class=\"men\" alt=\"Olympia Fitness Centre\" /></div>
<div id=\"content\"><h1>Olympia Fitness Centre : Currently Under Construction</h1></div>
<?php include(\"includes/footer.php\"); ?>
  </div>

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:
http://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.

treehouse : what would you like to learn today?

Forums

Margin Collapsing