Dreamweaver Preview is Different from REAL online site

Discussion in 'CSS' started by cluongo18, Nov 26, 2009.

  1. #1
    I created a site in Dreamweaver. Whenever I previewed the document, it all fit well and looked fine. I finally uploaded the website, and when I view it in firefox, there is a gap between the navbar and border of the bod.

    Here is a picture to show:

    http://img412.imageshack.us/img412/5458/helpu.jpg

    I attached the HTML + CSS so maybe somebody can help. I think it might have something to do with either the banner size or navbar. Im not too sure.


    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=utf-8" />
    <!-- TemplateBeginEditable name="doctitle" -->
    <title>Call of duty: Modern Warfare 2 Headquarters</title>
    <!-- TemplateEndEditable -->
    <link href="../stylesheet.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    <!--
    
    
    
    
    
    
    -->
    </style>
    <!-- TemplateBeginEditable name="head" -->
    <!-- TemplateEndEditable -->
    </head>
    
    <body>
    
    <div id="toplink">
    <a href="../luongonetwork.com">Luongonetwork</a>      forums
    </div>
    
    <img src="../banner.jpg" width="751" height="250"    />
    
    
    <ul class="nav">
    <li><strong><a href="index.html">Home</a></strong>
    	<ul>
    	<li></li>
    	</ul>
    </li>
    <li><strong>Site Information</strong>
    	<ul>
    	<li><a href="about.html">About Us</a></li>
    	<li><a href="contact.html">Contact Us</a></li>
    	<li><a href="submit.html">Submit Content</a></li>
    	<li><a href="sitemap.html">Site Map</a></li>
    	</ul>
    </li>
    <li><strong>Discuss</strong>
    	<ul>
    	<li>Forums</li>
    	<li>Facebook</li>
    	<li>Myspace</li>
    	<li>Youtube</li>
    	</ul>
    </li>
    <li><strong>COD:MW2</strong>
    	<ul>
    	<li>About The Game</li>
    	<li>Availability</li>
    	<li>Buy It</li>
    	<li>Other COD Games</li>
    	</ul>
    <li><strong>Single Player</strong>
    	<ul>
    	<li>Story Overview</li>
    	<li>Missions</li>
    	<li>Mission Guide</li>
    	<li>Characters</li>
    	</ul>
    <li><strong>Weapons</strong>
    	<ul>
    	<li>Weapon List</li>
    	<li>Weapon Strategies</li>
    	<li>Weapon Pictures</li>
    	<li>Weapon Stats</li>
    	</ul>
    <li><strong>Maps</strong>
    	<ul>
    	<li>Map List</li>
    	<li>Map Strategies</li>
    	<li>Map Downloads</li>
    	<li>Map Pictures</li>
    	</ul>
    <li><strong>Multiplayer</strong>
    	<ul>
    	<li>Multiplayer Information</li>
    	<li>Perks</li>
        <li>Modes</li>
    	<li>Killstreaks</li>
    	<li>Attachments</li>
        <li>Levels</li>
        <li>Strategies</li>
         <li>Prestiging</li>
    	</ul>
    <li><strong>Achievements</strong>
    	<ul>
    	<li>Single Player Achievements</li>
    	<li>Multiplayer Achievements</li>
        <li>Achievement Guide</li>
    	
    	</ul>
    </li></ul>
    <!-- TemplateBeginEditable name="Editable_Content_Body" -->
    <h1> Welcome to COD:MW2 HQ! </h1>
    <p>With the launch of Call of Duty: Modern Warfare 2, we know the desire to learn every aspect of this game will be great. Already one of the most anticipated games EVER, we have set up a goal to provide the most information on this game ever, and cram it into one little website. Be sure to check back daily for new information, sign up on the forums and talk with other fans, and if you want to even help out with the site please check out the &quot;help&quot; link. Lets blow this thing up!</p>
    <h1>COD:MW2 Launches Tonight!</h1>
    <p>Its been years, months, and days of anticipation but its finally here! CODMW2 launches tonight in the United States at 12 Midnight (EST). Lets hope it stands up to our expectations, get online, have a great time! Hopefully we will see you all on, all night long!</p>
    <!-- TemplateEndEditable -->
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    </body>
    </html>
    
    Code (markup):
    CSS
    @charset "utf-8";
    /* CSS Document */
    
    
    html {
      background-color: #000;
    } 
    
    p{
    font-family: Verdana, Geneva, sans-serif;
    font-size: 11px;
    text-indent: 10px;
    color: #000000;
    line-height: 18px;
    padding: 3px;
    }
    
    
    h1{
    font-family: Verdana, sans-serif;
    border-bottom: 2px white dotted;
    font-size: 35px;
    color: #818f33;
    line-height: 50px;
    padding: 0px;
    border-bottom: .5px black dotted;
    text-indent: 5px;
    }
    
    
    b{
    color: #dce450;
    padding-top: 2px;
    border-bottom: .5px black dotted;
    }
    
    
    body{
    background-color: #fff;
     border: 3px solid #85A110;
      width: 751px;
      margin-top: 20px;
      margin-left: auto;
      margin-right: auto;
    
    }
    
    
    #toplink {
    text-indent: 5px;
    font-size: 10px;
    padding-top: 2px;
    padding-bottom: 2px;
    }
    
    /*** Nav bar styles ***/
    
    ul.nav,
    .nav ul{
    /*Remove all spacings from the list items*/
    	margin: 0;
    	padding: 0;
    	cursor: default;
    	list-style-type: none;
    	display: inline;
    }
    
    ul.nav{
    	display: table;
    }
    
    ul.nav>li{
    	display: table-cell;
    	position: relative;
    	padding: 2px 6px;
    }
    
    ul.nav li>ul{
    /*Make the sub list items invisible*/
    	display: none;
    	position: absolute;
    	max-width: 40ex;
    	margin-left: -6px;
    	margin-top: 2px;
    }
    
    ul.nav li:hover>ul{
    /*When hovered, make them appear*/
    	display : block;
    }
    
    .nav ul li a{
    /*Make the hyperlinks as a block element, sort of a hover effect*/
    	display: block;
    	
    }
    
    /*** Menu colors (customizable) ***/
    
    ul.nav,
    .nav ul,
    .nav ul li a{
    	background-color: #fff;
    	color: #818f33;
    	
    }
    
    
    ul.nav li:hover,
    .nav ul li a:hover{
    	background-color: #000;
    	color: #fff;
    }
    
    ul.nav li:active,
    .nav ul li a:active{
    	background-color: #818f33;
    	color: #fff;
    }
    
    ul.nav,
    .nav ul{
    	border: 1px solid #818f33;
    	
    }
    
    .nav a{
    	text-decoration: none;
    	color: #818f33;
    	
    }
    
    Code (markup):
     
    cluongo18, Nov 26, 2009 IP
  2. vinpkl

    vinpkl Active Member

    Messages:
    899
    Likes Received:
    8
    Best Answers:
    0
    Trophy Points:
    58
    #2
    in your html
    
    <li>Achievement Guide</li>
    	
    	</ul>
    </li></ul>
    
    Code (markup):
    there is an extra space before </ul>

    try removing it.

    also the html you have pasted is template based so it will be beter if you send us a link to see it online.

    vineet
     
    Last edited: Nov 26, 2009
    vinpkl, Nov 26, 2009 IP
  3. cluongo18

    cluongo18 Member

    Messages:
    855
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    33
    #3
    That didnt fix it, try taking a look:

    http://codmw2hq.com
    Code (markup):
     
    cluongo18, Nov 26, 2009 IP
  4. zhangxj

    zhangxj Peon

    Messages:
    27
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    totally agree
    when I want to add something to my myspace homepage, it looks A in Dreamweaver but B in myspace
     
    zhangxj, Nov 28, 2009 IP
  5. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #5
    Hah, I saw the title and immediately went "No ****, REALLY?!?" Seriously, this comes as a shock to WHO exactly?!?

    Hmm, the markup isn't too bad, certainly better than what I've come to expect from most dreamweaver templates... though you have that OH SO WONDERFUL comment placement that's likely to cause IE rendering errors and the unnecessary strong tags and lack of anchors once nested (the anchors should likely be your hooks, not STRONG).

    There's a lot of **** that's going to bite you cross browser. The lack of a CSS reset means elements don't have the same starting margins/padding, and I have no idea how you expect those menu elements to result in the same total width... that should vary wildly cross browser AND cross OS since you aren't stating widths anywhere.

    Which of course is why my advice, as always, is to throw THAT STEAMING PILE Of **** CRAP known as Dreamweaver in the trash, grab a plaintext editor, and learn to write HTML/CSS directly.

    Because as a dearly departed friend often said... (see signature)
     
    deathshadow, Nov 28, 2009 IP
  6. cluongo18

    cluongo18 Member

    Messages:
    855
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    33
    #6
    ^ Ill take that into consideration. In the mean time, how can I fix this?
     
    cluongo18, Nov 29, 2009 IP
  7. Ashtone

    Ashtone Peon

    Messages:
    41
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #7
    *shudders* Hate dreamweaver.

    -
    Get notepad++

    Get www.w3schools.com

    Get learning ^^
    -

    I tried out your presented code and it worked fine. I have no idea why its not for you, the only difference is I dont have the images your using.

    www.ashfrancis.com/codhq/test.html :|
     
    Last edited: Nov 29, 2009
    Ashtone, Nov 29, 2009 IP