No replies
malinchista
malinchista's picture
Offline
Regular
San Jose, California
Last seen: 7 years 51 weeks ago
San Jose, California
Timezone: GMT-7
Joined: 2006-06-29
Posts: 19
Points: 0

Hey folks,

So I have a fairly simple layout that looks fine in IE, but has a gap above the header in Firefox. I'm adapting Matt Taylor's sticky footer code (http://matthewjamestaylor.com/blog/bottom-footer-demo.htm), but I can't lose this gap.

I've been reading around and Stomme Poes at http://csscreator.com/node/35514 suggests a margin-top: -2em that helps, fixing the Firefox header, but then adds a footer margin and in IE, chops off the top..necessitating more fixes ...is that the best I can do? is there a simpler answer I'm not seeing?

The page in question is at http://mindgarden.com/multirater.htm

Any help appreciated. Validated transitioal, and cross-browser checked.
s.

My html:

<body>
<div id="container">
  <div id="header">
    <h1>Hello Client Name </h1>
  </div>
  <div id="body">
    <p>Ipso facto alpha beta gamma delta epsilo hota iota jalapeno. Basic text and boxes and stuff.  		
</div>
  <div id="footer">
    <h3><a href="http://mindgarden.com">Mind Garden Home</a> |<a href="http://www.mindgarden.com/contact.htm"> Contact Us</a> | <a href="http://www.mindgarden.com/how.htm#privacy">Your Privacy</a> | <a href="http://www.mindgarden.com/forms/contactform.php">Help</a> </h3>
    <p>Mind Garden&reg; is a registered trademark of <a href="http://mindgarden.com/forms/contactform.php">Mind Garden, Inc</a>.&nbsp;&nbsp; Copyright &copy;2005-2009</p>
  </div>
</div>
</body>

My CSS:

html,
	body {
		margin:0;
		padding:0;
		height:100%;
		font: normal 90% Verdana, Arial, Helvetica, sans-serif;
		color:#003;}
#container {	min-height:100%;
		position:relative;}
#header {	margin: 0 ;
	padding:0;
	width: 100%;
	height: 80px;
	border-bottom: 1px solid black;
	background: #FFF url(<a href="http://mindgarden.com/images/nav/plainheader.jpg" rel="nofollow">http://mindgarden.com/images/nav/plainheader.jpg</a>) repeat-x;
}
 
 
#body {
	margin: 20px 50px;
	padding:10px;
	padding-bottom:60px;	/* Height of the footer */
}
#footer {position:absolute;
	bottom:0;
	width:100%;
	height:60px;			/* Height of the footer */
	background: #FFF url(<a href="http://www.mindgarden.com/images/nav/plainheader.jpg" rel="nofollow">http://www.mindgarden.com/images/nav/plainheader.jpg</a>) repeat-x;
	border-top: 1px solid #000;
	text-align: center;
}
#footer h3 {margin: 10px 0 5px 0; font: bolder 1em Verdana, Arial, Helvetica, sans-serif;}
#footer p {margin: 0; padding: 0; font: italic .9em Verdana, Arial, Helvetica, sans-serif; line-height: 1.4em; }
 
#header h1 {font-size: 1.5em; padding: 30px 0 0 50px;}
 
p {
	font: normal 1.0em Verdana, Arial, Helvetica, sans-serif;
	line-height: 1.6em;
	color: #003;
	padding: 0;
	margin: .4em 0 1.2em;
}
 
<!--[if lt IE 7]>
	#container {height:100%;}
	<![endif]-->