CSS noob question

programming web dev
1

Hey all, devolping this web page:

http://www.blee-ree-eyed.com/csq/default.html

And i have one of those “what do you mean it doesn’t work!?!?” problems. When viewed in FF the header graphic seperates from the body. When seen in IE, it is fine. Pardon the roughness of the attached code, i am still in mid development:

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>Canadian String Quartets</title>
<link href="csq_default.css" rel="stylesheet" type="text/css" />
<link href="csq_nav.css" rel="stylesheet" type="text/css" />
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
</head><body>
<div class = "core">
     <div class = "header"> </div>
     <div class = "body">
          <div class = "nav">
               <ul>
                    <li><a href="../galleries.html" title="contact">contact</a></li>
                    <li><a href="../about.html"  title="repertoire">reprettoire</a></li>
                    <li><a href="../cv.html"  title="services">services</a></li>
                    <li><a href="../contact.html" title="home">home</a></li>
               </ul>
          </div>
          <div class = "head"> <img src="images/flash interface.png" alt="dummy nav interface" width="600" height="280" /> </div>
          <div class = "leftCol"> ciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam ali 
		  </div>
     </div>
</div>
</body>
</html>

and both CSS files:

/* CSS Document */

body{
	background-repeat:repeat-x;
	background-image:url(images/ground.jpg);
	background-color:#291F23;
	color:#FFFFFF;
	font-family:"Eras Medium ITC", futura, Arial, helvetica, sans-serif;
}
.core{
	display:table;
	width:650px;
	height:auto;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:auto;
	margin-top:0px;
	}
	
.header {
	background-image:url(images/header.jpg);
	background-repeat:no-repeat;
	height:94px;
	margin-bottom:0px;
	}
	
.body{
	background-image:url(images/body_ground.jpg);
	background-repeat:repeat-y;
	background-color:#000000;
	margin:0px;
	width:650px;
}
.head{
	width:600px;
	height:280px;
	padding:15px 25px;
}
.leftCol {
	background-image:url(images/regColGround.jpg);
	background-repeat:repeat-x;
	width: 330px;
	margin:25px;
	padding:25px;
	text-align:left;
}

.rightCol {
	width: 200px;
	display:inline;
	float:left;
	text-align:left;
}

/* CSS Document */

.nav {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:1.2em;
	color:#FFFFFF;
	margin-top:0px;
	margin-right:20px;
	margin-left:auto;
	height: 30px;
	padding:0px;
}

.nav ul {
	list-style: none;
	}

.nav li {
	padding: 0px;
	margin-left:0 px;
	display: inline;
}

.nav a {
	display: block;
	float: right;
	height: 0px;
	padding: 10px 10px 0px  30px;
	margin: 0px;
	text-decoration: none;
	color:#FFFFFF;
}

.nav li:hover {
	color:#CC0000;

Thanks guys!