2 replies [Last post]
flipsideguy
Offline
Regular
Last seen: 14 years 16 weeks ago
Joined: 2004-11-06
Posts: 16
Points: 0

Here's my CSS:

BODY {
	font: 10px/13px Verdana, Arial, Helvetica, sans-serif;
	color: #4C4C4C;
	margin: 0px;
	text-align: center;
	background: #7EA2AE;
}

P {
	margin: 0px 0px 16px 0px;
}

#frame {
	width: 717px;
	margin: 50px auto;
	background: #FFF;
}
#contentframe {
	width: 697px;
	margin:10px;
}

.colordark {
	background: #406677;
}

.colorlight {
	background: #7EA2AE;
}

#typearea {
	margin: 29px 24px 18px 18px;
}

Here's the page: http://www.marinabayca.com/

On IE, the margin is fine, but on FF the contentframe div loses tha top and bottom margins. Any ideas???

Thanks!

/Flip

flipsideguy
Offline
Regular
Last seen: 14 years 16 weeks ago
Joined: 2004-11-06
Posts: 16
Points: 0

IE - good. FF - bad. margin:10px not working on FF???

#frame {
	width: 717px;
	margin: 50px auto;
	background: #FFF;
	height:529px;
}
#contentframe {
	width:697px;
	margin:0px 10px 10px 10px;
	height:509px;
	top:10px;
	position:relative;
}

I did this and it works on both browsers. But it's strange why a simple margin:10px won't do it on FireFox.

I would like your input on this.

/Flip

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 19 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

IE - good. FF - bad. margin:10px not working on FF???

FF is behaving itself you tried to position the #contentframe down from the top using top:10px, you can only shift a div if it has been positioned, in this case 'relative', which preserves it's original space in the flow and just visually shifts the div you could also use 'absolute' which removes the div from the flow altogether.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me