Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

Shaneuk

macrumors regular
Original poster
I've been following the CSS Tutorial on here and my site looks different in Chrome and Dreamweaver.

Chrome:

2rz3q5e.jpg


Dreamweaver:

wgxesj.jpg


Here's the codes:

Html:

Code:
<!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=UTF-8" />
<title>Test Site | ShanePhotographics</title>
<style type="text/css">
body,td,th {
	font-family: Verdana, Geneva, sans-serif;
}
h1,h2,h3,h4,h5,h6 {
	font-family: Verdana, Geneva, sans-serif;
}
</style>
</head>

<body>
<div id="wrap">
  <p><img src="images/banner2.gif" alt="Test Site ShanePhotographics" border="0" /></p>
</div>
  <div id="nav">
<a href="index.html">Home</a> <a href="page2">About</a> <a href="page3">Blog</a> <a href="page4">Books</a> <a href="page5">Contact</a>
</div>
<div id="content">
<h2>New Layout | December 2010</h2>
		<span class="update">Update description goes here.  Update description goes here.  Update description goes here.  Update description goes here.  </span>
</div>
<div id="footer">
© ShanePhotographics 2011 | <a href="mailto:shanephoto@gmail.com">shanephoto@gmail.com</a>
</div>

</body>
</html>
<link href="style.css" rel="stylesheet" type="text/css" />

CSS:

Code:
@charset "UTF-8";
/* CSS Document */

body {background-color: #FFFFFF;

#wrap {
	margin: 10px auto;
	width: 800px;
}

#nav {
	width: 800px;
	height: 24px;
	background-color: #FFFFFF;
	border-top: 1px solid #999999;
	border-bottom: 1px solid #999999;
	padding-top: 4px;
	padding-left: 20px;
}

a {
	padding-right: 10px;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 12px;
	color: #C0C0C0;
	text-decoration: none;
}

a:hover {
	color: #000000;
	text-decoration: none;
}

#content {
	width: 800px;
	padding: 5px;
	border: none;
	background-color: #FFFFFF;
}

h1 {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 14px;
	font-weight: normal;
	color:;
}

.update {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 12px;
	color: #000000
}

#footer {
	align: left;
	margin: 0px;
	background-color: #FFFFFF;
	border: 1px solid #C0C0C0;
	width: 800px;
	height: 25px;
	text-align: center;
	padding-top: 5px;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 12px;
	color: #000000;
	text-decoration: none;
}

#footer a {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 12px;
	color: #C0C0C0;
	text-decoration: underline;
}

#footer a:hover {
	text-decoration: none;
	color: # #FFFFFF;
}
 
Are you just switching to WYSIWYG mode or using live preview? I haven't used it in awhile, but in my experience, Dreamweaver's in-program viewing is always significantly different than a actual browser. What version do you have? If you have CS4 or CS5 I'd just stick to using the live-preview as it will be much more accurate. If it's not available, then I'd just stick to testing in-browser

Also,

a. I'd take out your in-line css, as, well, it just makes no sense to keep it there.

b. Also, since they're all declare the same thing, you don't need multiple
font-family declarations since you've already specified it in the "body" selector.
 
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.