Register FAQ / Rules Forum Spy Search Today's Posts Mark Forums Read
Go Back   MacRumors Forums > Special Interests > Visual Media > Web Design and Development

Reply
 
Thread Tools Search this Thread Display Modes
Old Dec 30, 2010, 09:23 AM   #1
Shaneuk
macrumors regular
 
Join Date: Aug 2010
Help! page looks different in Chrome / Firefox

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

Chrome:



Dreamweaver:



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;
}
__________________
Shane Lee
Shaneuk is offline   0 Reply With Quote
Old Dec 30, 2010, 09:57 AM   #2
Ride9650
macrumors 6502
 
Join Date: Jun 2007
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.
Ride9650 is offline   0 Reply With Quote
Old Dec 30, 2010, 10:10 AM   #3
Shaneuk
Thread Starter
macrumors regular
 
Join Date: Aug 2010
Thanks. I figured it out now, I was missing one } from the CSS Page.
__________________
Shane Lee
Shaneuk is offline   0 Reply With Quote

Reply
MacRumors Forums > Special Interests > Visual Media > Web Design and Development

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump

Similar Threads
thread Thread Starter Forum Replies Last Post
Why does MacRumors main page looks different on Safari for Mac vs Safari for Windows jsoto MacBook Pro 8 Dec 9, 2010 09:00 PM
Web page looks different on PC's JudyK Web Design and Development 10 Sep 25, 2009 05:22 PM
Picture looks different in Finder Preview than in Preview app Jblack4083 Mac Applications and Mac App Store 4 May 23, 2009 02:13 PM
Web pages look different after 1.1.1 update macbookProSF iPhone 2 Oct 7, 2007 12:05 PM
Why does Google look different in Safari/Webkit? apfhex Mac Applications and Mac App Store 11 Sep 17, 2006 08:04 PM


All times are GMT -5. The time now is 11:42 PM.

Mac Rumors | Mac | iPhone | iPhone Game Reviews | iPhone Apps

Mobile Version | Fixed | Fluid | Fluid HD
Copyright 2002-2013, MacRumors.com, LLC