Help! page looks different in Chrome / Firefox

Discussion in 'Web Design and Development' started by Shaneuk, Dec 30, 2010.

  1. macrumors regular

    Shaneuk

    Joined:
    Aug 29, 2010
    #1
    I've been following the CSS Tutorial on here and my site looks different in Chrome and Dreamweaver.

    Chrome:

    [​IMG]

    Dreamweaver:

    [​IMG]

    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;
    }
     
  2. macrumors 6502

    Joined:
    Jun 29, 2007
    #2
    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.
     
  3. thread starter macrumors regular

    Shaneuk

    Joined:
    Aug 29, 2010
    #3
    Thanks. I figured it out now, I was missing one } from the CSS Page.
     

Share This Page