OK in IE - 8 pixel gap in Moz

[blondy]

Hi folks,
I'm using css to create a 3 column layout with header and footer, see

http://www.gourmetmarket.com.au

. Everything is fine in IE, but there is an 8-10 pixel gap between the header and content, content and footer in mozilla. I've tried everything, this is driving me slowly nuts! Any advice woud be greatly appreciated.

css follows:

a,p,li,h3,table,body
{
font: 12px arial, 'sans serif'; 
}
	html, body {
	text-align:center;
	line-height:100%;
	color: #000000;
	margin: 0;
	padding: 0;
	background-color: #fefefe;
}
	#printmast{
		display:none;
	}
	#container {
		z-index: 12;
		width:760px;
		height:600px;
		padding:0;
		background-color: white;
		margin-left: auto; margin-right: auto; margin-top: 0; margin-bottom: 0; /* For Moz */
		}
		
	#intro {
		display: none;
		z-index: 1;
		color: black;
		position: absolute;
		top: 30px;
		left: 200px;
		width: 300px;
		background-color: red;
	}
	#header {
		z-index: 10;
		margin:0; 
		padding:0;
		background-image: url(../images/bantop.gif);
		text-align: center;
		width: 100%;
		height: 153px;
		}
	#main1 {
		margin:0; padding:0;
		z-index: 12;
		}
	#main2 {
		margin:0; padding:0;
		}
	#left {
		float:left;
		text-align:right;
		background-image: url(../images/banlft.gif);
		background-repeat: no-repeat;
		width:170px;
		height:446px;
		margin:0; 
		padding-right:5px;
		font-size:80%;
		background-color:#d2232a;
		}
	#right {
		float:right;
		background-image: url(../images/banrgt.gif);
		background-repeat: no-repeat;
		height:446px;
		width:116px;
		margin:0;
		padding:0;
		font-size:80%;
		}
	#middle {
		margin:0 116px 0 170px; /* top right bottom left */
		font-size:80%;
		padding: 0;
		height:440px;
		}
	#mccont {
		padding:0px 0px 0px 3px;
		margin:0px;
		text-align: left;
	}
/* Fix IE. Hide from IE Mac \*/
* html #mccont ul li { float: none;  }
* html #mccont ul li a { }
/* End */

#mccont p {
		padding-bottom: 10px;
	}
	#mccont ul {
		list-style: square outside;
		line-height:80%;
		margin-top:0px;
	}
		* html #mccont { margin-top: 0; }
	.column-in {
		margin:0;
		padding:0;
		}
	.cleaner {
		clear:both;
		height:1px;
		font-size:1px;
		border:none;
		margin:0;
		padding:0;
		background:yellow;
		}
	 * html .cleaner{display:none}  /*STOPS CLEANER FROR IE */
	h1,h2,h3,h4 { margin: 0.2em 0 }
	p { margin: 0em 0 }
	a { color:black }
	
	.copy { text-align:center; font-size:80% }
	#logint {
			display:none;
			float:left;
			width: 100px;
			height: 20px;
			left: 0px;
			top: 0px;
			z-index: 99;
		}
/*Main Menu */
		#menu span {
			display:none;
		}
		#menu
		{	
			display:block;
			text-transform: uppercase;
			margin: 0;
			padding: 0;
			font-size: 90%;
			text-align: center;
			z-index: 99;
			background-color: red;
			color:#E8D3A2;
			width: 760px;
		margin-left: auto; margin-right: auto; margin-top: 0px; margin-bottom: 0px; /* For Moz */
		}
		#menu
		{
			width: 760px; 
			voice-family: "\"}\""; 
			voice-family:inherit;
			width:760px;
		}
		html>body #menu
		{
			width: 760px;
		}
/*Prod Menu */	
		#prmenu
		{	position: relative;
			top:70px;
			left: 0px;
			margin-left: 0;
			padding-right: 5px;
			font-size: 90%;
			text-align: right;
			z-index: 99;
			background-color: #D2232A;
			color:#000000;
		}
		#prmenu
		{
			width: 130px;
			voice-family: "\"}\""; 
			voice-family:inherit;
			width: 130px;
					}
		html>body #prmenu
		{
			width: 130px;
		}
		#prod_container
		{
			text-align:center;
			width: 90%;
		}
		#prtable {
			font-size:90%;
			text-transform:lowercase;
		}

		#prscroll {
			scrollbar-base-color: #F7EDD4; 
			scrollbar-arrow-color: #E8D3A2;
			scrollbar-DarkShadow-Color: #E8D3A2;
			scrollbar-track-color: #E8D3A2; 
			height: 300px;
			overflow: auto;			
		}
		#prodtab
		{
			width: 400px;
			text-align: center;
			margin-bottom: 5px;
			border:#D2232A 2px solid;
			border-collapse: collapse;
		}
		#prodtab td
		{
		}
		.prodhd
		{
			background-color: #E8D3A2;
			font-weight:bold;
			color:#000000;
		}
		.impos {
			width:120px;
			vertical-align: middle;
		}
		#prtabhd
		{
		}
		#prdistable
		{
			width:250px;
		}
		.prrow
		{
			background-color: #E8D3A2;
		}
		.premp
		{
			font-weight:bold;
			color:#cccccc;}
		/* End Products Display */
		.not {display:none;}	
		#tabbas{
			text-align:center;
			width:450px;
		}
		h3 {color: #D2232A;
			font-size:120%;
			font-weight:bold;}
img
{
border: 0px;
}
		#mssg{
			text-align:center;
			color: red;
		}
		#navig
		{
			display: none;
			background-color: #1e559e;
			padding: 1px;
			color: #fefefe;
			font-weight: bold;
			font-size: 90%;
			position: absolute;
			left: 150px;
			top: 130px;
			width: 70%;
		}
		#tips
		{
			display: none;
		}
		
		#footer
		{
			height:60px;
			color: #E8D3A2;
			text-align: center;
			background-color:green;
		margin-left: auto; margin-right: auto; margin-top: 0px; margin-bottom: 0px; /* For Moz */
		}
		.futta{
			display:block;
			margin-top:0px;
		}
		.progh
		{
			font-weight: bold;
		}
a.footr:{text-decoration: underline;}
a.footr:link {COLOR: #E8D3A2; font-weight: bold;}
a.footr:visited {COLOR: #E8D3A2; font-weight: bold;}
a.footr:active {COLOR: #E8D3A2; font-weight: bold;}
a.footr:hover {font-weight: bold;}
/*Regis*/
		
		#regis label {
			float:left;
			width:69px;
			text-align:left;
		}

		#regis input {
			float:left;
		}
		#regis textarea {
			float:left;
		}

Therese

"Time is an illusion. Lunchtime doubly so." Douglas Adams. (1952 - 2001)

 

[Vragabond]

Wow. This is one of the most confusing CSS files I have ever seen. I have realized you're experiencing problems because your inner main div (#main2) does not have a border. I have no idea why border makes Mozilla shift the box up, but I am pretty sure your site could and should be simplified to ensure better compatibility. Do you even know why you have the main2 within main1? I see no reason for that.

 

[blondy]

Thanks Vragabond,

I'll bet you that i'm more confused than you will ever be!

...The truth? No I don't know why. It was in the original "3 column fluid layout" that I have mercilessly bastardised - resulting in the awful mess you see before you!

The border didn't make any difference. I thought it may have something to do with clearing the floats, but I just can't seem to get anything to work.

Therese

"Time is an illusion. Lunchtime doubly so." Douglas Adams. (1952 - 2001)