FF vs IE css spacing

Dawg

This has probably been addressed a billion times but I cannot seem to get it solved nor find the solution.

It used to be an issue in IE but now it seems it is in FF.

This is the page I am starting to build for a group
http://www.webbdawg.com/24metre/

In FF there is about 1/4in at the top but in IE it is not there.

Here is the layout css:

body {	
	background-color:#CCCCCC;
	font-family: Arial, Helvetica, sans-serif;	
	font-size: 1em;
	margin:0;
	padding:0;
	/*margin-right: 0.1em;
	margin-bottom: 0.1em;
	margin-left: 0.1em;
	*/
	}
#wrapper{
	position: relative; top: 0;
	margin-left:50px;
	width:1000px;
	height:900px;
	z-index:1;
	padding:0;
	}
#homepage_content{
	background-image:url(/24metre/images/backgrounds/homepage.jpg);
	background-repeat:no-repeat;
	background-position:top;
	width:1000px;
	height:710px;
	margin:0;
	padding:0;
	}
#header {
	position:relative;
	width:644px;
	height:115px;
	z-index:1;
	top:25px;
	left:25px;
}
#homepage_video {
	position:relative;
	width:400px;
	height:200px;
	z-index:1;
	left: 575px;
	top: 375px;
}
#footer{
	width:1000px;
	height:175px;
	background-color:#6699FF;
	padding-top:10px;
	}

Here is the page html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>US 2.4mR homepage</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
<link href="layout.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
	<div id="homepage_content">
	  <div id="header">
	    <h1 align="left"><font color="#FFFFFF">US 2.4mR Class Assocation<br />
	      Online
        Magazine</font></h1>
	  </div>
	  <div id="homepage_video">
	    <iframe title="2.4mR Race 1" width="400" height="200" src="http://www.sailgroove.org/embed/NTExMTMyMzkz" frameborder="0" allowfullscreen></iframe>
	  </div>
	</div>
  <div id="footer">
		<?php include("footer.inc"); ?>
	</div>
</div>

</body>
</html>

Thanks for any input

dalecosp

Have you tried "margin-top" in the header instead of just plain "top"?

Dawg

dalecosp;10978673 wrote:
Have you tried "margin-top" in the header instead of just plain "top"?

The Header is just the placement for the page title. I probably should have renamed it. The Top and Left are placement coordinates.

Thanks though

dalecosp

Hmm, are you even sure there's a problem? I've looked at it (now) in FF 3 and IE 8, and they look the same to me....

Dawg

dalecosp;10978772 wrote:
Hmm, are you even sure there's a problem? I've looked at it (now) in FF 3 and IE 8, and they look the same to me....

Back home now.

the first image is from my FF 3.6.16 and the second is from ie 8.0.6001.18702

johanafm

I get the exact same thing in both FF 3.6.16 and IE 8.0.6001.18702 - a 1em margin-top from the h1 element. You can get rid of this margin by specifying the following css rule, which applies only to this h1 element, or actually any h1 element which is a child of the #header element if you were to add more h1 elements to the #header div.

body #wrapper #homepage_content #header h1
{
	margin-top: 0;
}

As for the discrepancy you encounter in the two browsers, have you tried doing a page reload (not just a page load) as that also reloads css files among other things in most browsers. And failing that, have you tried deleting cache files before loading the page?
Since browsers cache css files, it's likely that one of the browsers is showing an older layout.

Also, the iframe contains inline styling errors which you should correct even though they have no impact on the issue you posted about. I.e. width: 100%px makes no sense and the entire attribute is dropped.

And finally, the font element has been deprecated. Use span and css instead.