Preview Looks Nothing Like Live View`

I used a 3 column fixed header and footer template in DW CS6 and when I preview it in Chrome or IE all of my columns are gone and the page is lined up like I don't have any columns-does anyone know why? I'm all ears!!!
Live View
Chrome Preview

It's not live yet but here's the code. I want to use this as the template for the rest of the site so your help is really appreciated!
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<!-- TemplateBeginEditable name="doctitle" -->
<title>PCC Template</title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
<link href="/www.ocpcc.org/pcc_template.css" rel="stylesheet" type="text/css">
<style type="text/css">
body {
          background-color: #ffffff;
</style>
<link rel="stylesheet" href="../ajxmenu.css" type="text/css">
<script src="../ajxmenu.js" type="text/javascript"></script>
<link rel="stylesheet" href="../pcc_nav.css" type="text/css">
<style type="text/css">
a:link {
          color: #0000FF;
a:visited {
          color: #660000;
a:hover {
          color: #000000;
a:active {
          color: #0000FF;
h1 {
          font-size: 16pt;
          color: #000000;
h2 {
          font-size: 14pt;
          color: #000000;
h3 {
          font-size: 12pt;
          color: #000000;
</style>
<script src="../pcc_nav.js" type="text/javascript"></script>
</head>
<body>
<div class="container">
  <div class="header"><a href="#"></a>
    <!-- end .header --><img src="/www.ocpcc.org/images/banner_orig.png" width="960" height="115" alt="PCC Banner"></div>
  <div class="sidebar1">
    <ul class="nav">
      <li>
        <div class="AJXCSSMenuBaUdNOD"><!-- AJXFILE:../pcc_nav.css -->
          <ul>
            <li class="tfirst"><a id="AJXCSSMenuBaUdNODitem_0" href="#">Welcome</a></li>
            <li><a href="#">Who We Are</a></li>
            <li><a href="#">Sermon Series</a></li>
            <li><a href="#">Worship Schedule</a></li>
            <li><a href="#">Calendar of Events</a></li>
            <li class="tsub"><a class="ajxsub" href="#">Getting Connected</a>
              <ul>
                <li class="sfirst"><a href="#">Children's Ministries</a></li>
                <li><a href="#">Student's Ministries</a></li>
                <li><a href="#">Women's Bible Study</a></li>
                <li class="slast"><a href="#">Retired Men's Group</a></li>
              </ul>
            </li>
            <li><a href="#">Staff</a></li>
            <li><a href="#">Fellowship</a></li>
            <li class="tlast"><a href="#">Pastor Tim's Blog</a></li>
            <li class="timg"><img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt=""></li>
          </ul>
          <br >
        </div>
      </li>
    </ul>
    <!-- end .sidebar1 --></div>
  <div class="content">
    <h1> </h1>
    <h1>Content</h1>
    <p>Be aware that the CSS for these layouts is heavily commented. If you do most of your work in Design view, have a peek at the code to get tips on working with the CSS for the fixed layouts. You can remove these comments before you launch your site. To learn more about the techniques used in these CSS Layouts, read this article at Adobe's Developer Center - <a href="http://www.adobe.com/go/adc_css_layouts">http://www.adobe.com/go/adc_css_layouts</a>.</p>
    <h2>Clearing Method</h2>
    <p>Because all the columns are floated, this layout uses a clear:both declaration in the .footer rule. This clearing technique forces the .container to understand where the columns end in order to show any borders or background colors you place on the .container. If your design requires you to remove the .footer from the .container, you'll need to use a different clearing method. The most reliable will be to add a &lt;br class=&quot;clearfloat&quot; /&gt; or &lt;div  class=&quot;clearfloat&quot;&gt;&lt;/div&gt; after your final floated column (but before the .container closes). This will have the same clearing effect.</p>
    <h3>Logo Replacement</h3>
    <p>An image placeholder was used in this layout in the .header where you'll likely want to place  a logo. It is recommended that you remove the placeholder and replace it with your own linked logo. </p>
    <p> Be aware that if you use the Property inspector to navigate to your logo image using the SRC field (instead of removing and replacing the placeholder), you should remove the inline background and display properties. These inline styles are only used to make the logo placeholder show up in browsers for demonstration purposes. </p>
    <p>To remove the inline styles, make sure your CSS Styles panel is set to Current. Select the image, and in the Properties pane of the CSS Styles panel, right click and delete the display and background properties. (Of course, you can always go directly into the code and delete the inline styles from the image or placeholder there.)</p>
    <p> </p>
    <p> </p>
    <p> </p>
    <!-- end .content --></div>
  <p> </p>
  <p class="container.titleorange"><em><strong>Special Upcoming Events</strong></em></p>
  <p> </p>
  <p>Angels Game 8/17</p>
  <p>  <img src="/www.ocpcc.org/images/angels_oval.png" width="117" height="192" alt="Angels Game"></p>
  <p>All Church Picnic</p>
  <p>     <img src="/www.ocpcc.org/images/volleyball_thumb_border.jpg" width="128" height="106" alt="Picnic"></p>
  <p>The Story</p>
  <div class="footer">
    <blockquote>
      <blockquote>
        <blockquote>
          <blockquote>
            <blockquote>
              <blockquote>
                <blockquote>
                  <p>Presbyterian Church of the Covenant<br>
                    2850 Fairview Rd<br>
                  Costa Mesa, CA 92626
                  <br><strong>Email:</strong> Click <a title="Email Natalie" href="#mailto:[email protected]" target="_blank">here</a> to send us an email<br><strong>Phone:</strong> <span id="gc-number-0" title="Call with Google Voice">(714) 557-3340</span><br>
                  </p>
                </blockquote>
              </blockquote>
            </blockquote>
          </blockquote>
        </blockquote>
      </blockquote>
    </blockquote>
    <!-- end .footer --></div>
  <!-- end .container --></div>
</body>
</html>

Similar Messages

  • Why does my published site look nothing like the Muse site I designed?

    I have published and taken live several sites and they all looked as expected. The most recent site looks nothing like the Muse site I designed. I published it and BC took me to the home page, where all the background images, graphics, slide show are all missing. Text looks like regular text, not html formatted text. I can't show this. What happened?

    Similar situation just happened to me this morning.  Opened a Muse site I was working on and when I preview it the web fonts are not showing and alignment is wierd.  ???  Was working fine last week.

  • HT2905 My itunes looks nothing like the examples in this tutorial.  I do not have "display exact duplicates" or "date added".  Can someone please help me remove duplicate songs?  Also, I downloaded two audio books and they are showing up in my song list.

    My itunes looks nothing like the examples in this tutorial.  I do not have "display exact duplicates" or "date added".  Can someone please help me remove duplicate songs?  Also, I downloaded two audio books and they are showing up in my song list. Why???

    'Show duplicates' is now under the 'View' menu. To see the 'Date added' column go to 'View options' from the 'View' menu and check it in the section under 'Stats'.
    Click an audiobook once to select it and hit command-i (Mac) or control-i (Windows). Go to the 'Options' tab and set 'Media Kind' to 'Audiobook'.

  • I downloaded FF 4 and now 5 and with neither my screen looks nothing like it shows on the FF page. For instance, I do not have the orange FF tab in the upper left corner, I have no option of "pin as app" nor do I have Panorama. Can someone please help me?

    I downloaded FF 4 and now 5 and with neither my screen looks nothing like it shows on the FF page. For instance, I do not have the orange FF tab in the upper left corner, I have no option of "pin as app" nor do I have Panorama. Can someone please help me?

    To get the orange FF tab, go to View > Toolbars > Menu Bar. This should uncheck the menu bar and give you the orange button.
    Panorama is a box made of 4 grey rectangles that should be on the far right, if it isn't after you enable the orange FF tab, right click on anywhere on a tool bar that doesn't have anything on it, and you should get a menu with a list of your tool bars that you can check and uncheck. go down to customize at the very bottom and it will open a window with all your buttons. Find the panorama/tab groups button and drag it onto the tool bar of your choice.
    to pin a tab as an app, right click on it; it's an option in the right-click menu.

  • Page looks fine in live view but not fine in safari

    my index.html page looks okay in live view, but when i open it in safari some of my text is unformated. My CSS page is correct so the problem lies in my code. I have attached the html file, any help will be appreciated. Thank you!

    Thanks for taking the time to reply to question. Aftr taking a break. I came back realized I inserted the stylesheet before I changed site settings. I just needed to remove the forward slash from my stylesheet declaration. FYI for anyone else new to DW: if stuffs not showing  in Live View and Browser Preview eg background images, Go to Manage Sites and check your site setting for Links relative to: You may have switched between document and site root. Thus breaking your links to images or in my case the entire style sheet.

  • When I copy and paste text in facebook, the text looks fine until I hit 'share' or 'comment' to submit it. Firefox then adds indiscriminate line-feeds within the text and it looks nothing like the original text. This does not happen in Safari. (Mac OSX 10

    When I copy and paste text in facebook, the text looks fine until I hit 'share' or 'comment' to submit it. Firefox then adds indiscriminate line-feeds within the text and it looks nothing like the original text. It makes it very difficult to read and awful to look at.
    This does not happen in Safari.
    (Mac OSX 10.6.4 with Firefox 3.6.6).
    == URL of affected sites ==
    http://

    Same problem, 3.6.8 and previous recent versions. I never thought to try another browser but I just pasted into IE and it worked fine. I copied from Firefox to IE and it worked as well. It's just when you paste into Firefox that you get the weird line breaks.

  • Why does my BC look nothing like the Tutorials???

    My admin console looks NOTHING like the tutorials. There's no top tabs, theres no icons, theres no description of my website pages...it's very plain/vanilla and very much unrefined.
    I'm clearly in the wrong area, or there was some update that took place that seems like it took more than two steps backward.

    Hi,
    You are in the correct area its just that some of the articles might be referencing the old v2 interface while you are on the new v3 interface. 
    We're in the process of making sure all our documentation will reflect the new interface however in the meanwhile you can reference articles on this page.
    - http://helpx.adobe.com/content/help/en/business-catalyst/topics.html
    If stuck on anything let us know and we'll assist further.
    Kind regards,
    -Sidney

  • My firefox 4 default theme looks nothing like the one in the video.

    I just installed firefox 4. Sadly my default theme looks nothing like the one in the video..
    Heres how it looks..
    http://i51.tinypic.com/2w5ru4o.png

    First you need to use the default theme "Default 4.0" in "Tools" > "Add-ons" > "Appearance".
    After that, right click the top bar and unckeck "Menu Bar". This will disable the menu bar and show the orange Firefox button.
    Make sure you have also "Tabs on top" checked.
    I also see you use ChromiFox theme in Firefox 3. If you want to have a similar theme for Firefox 4, you can download the FXChrome theme.
    https://addons.mozilla.org/en-US/firefox/addon/fxchrome/

  • Results look different in Live View and Browser Lab

    I'm using CS5 and am using absolute positioning to place an image. It looks great in Live View, but when I open Browser Lab it has shifted dramatically. Any ideas what's going on and with view should I trust. Thanks.

    Hi Jalynoble,
    We've tried to repro the issue you describe, but haven't been able to, so it must be something specific to your page. Can you provide us with a URL or package up and email the source code for the page with this issue so we can look into it?
    You can post the url here, or email the files to [email protected]
    Thanks,
    Mark

  • Spry Menu bar looks OK in Live View, not browser

    I'm trying to insert a Spry menu bar in an existing site to replace one previously built with an F-source product. There is a Flash movie above the menu bar. It looks fine in Live View, but when I look at it in a browser, it expands to about ten times its height with only the last menu item visible (out of nine). It also displaces the Flash movie to the left and up. Any idea what's causing this, and how to fix it? Thanks for any help you can provide!
    Live View:
    Browser View:

    Thanks for your help. I tried to add the code above the menu bar (you didn't specify whether to add before the body tag) but it didn't help in either location.
    I've uploaded the page in question to the site. You can access the page via http://www.acsi-cybersa.com/index2.html
    If you back up to the "www.acsi-cybersa.com" URL, you will see a working homepage with an f-source menu that is acting a bit squirrely, and which I am trying to replace with the Spry menu. The URL above "index2.html" is the working replacement for the home page.
    If you can figure out what's happening with the Spry menu and how to fix it, I would be eternally grateful.
    Thanks, Dan

  • Why does my site look nothing like the design and during testing once uploaded to the server?

    Why does my site look nothing like the design and during testing once uploaded to the server?,
    Im using Muse whichj crashes like you would not beleive, but after much perseverance I got a basic 4 page holding site together, I tested the site and it all looked fine, when I uploaded it to the server it looks nothing like the site I tested, to the point that even the background has changed colour and nothing is in the rite place.

    Hi John, Sure it's
    http://www.thezine.co.uk
    thanks
    it should be looking like this

  • I have created several templates and they look great in live view, however they look like crap when actually tried to set up a webpage based on the template. Help!

    I have created sevedral templates and they look great in the live view, however they look like plain HTML text when I try to create a webpage based on the template. HELP!

    This forum is about the Cloud as a delivery process, not about using individual programs
    If you start at the Forums Index https://forums.adobe.com/welcome
    You will be able to select a forum for the specific Adobe product(s) you use
    Click the "down arrow" symbol on the right (where it says All communities) to open the drop down list and scroll

  • Website looks nothing like my design :|

    Hi All,
    Second post here, hope that you are able to assist.
    So I started to build a website and its based on the throughout template: http://www.freecsstemplates.org/preview/throughout/.
    In dreamweaver, and its preview through to firefox, it looks great. Otherwise, as soon as its on the web, it looks nothing at all, like it should :|
    We have a silver business package with FastHosts. Things like ASP and PHP are included as standard, but I just cant see whats gone wrong or why?
    So click on the above link to see how the template should really look (colour in my website is a goldy yellow text with black background, all else is very similar)
    and the below is what it looks like on the web :|
    Can anyone advise if I am missing the obvious? do I need to set something on fasthosts to allow the javascript of the template?

    You're a beginner.  It takes time to learn everything you don't know.  To save some time, copy and paste this code into a new, blank document.  I stripped out everything non-essential and changed your slideshow to jQuery Cycle2.  It works now.
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Mark Jenkinson Photography</title>
    <!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
    <!--jQuery latest core library-->
    <script src="http://code.jquery.com/jquery-latest.min.js">
    </script>
    <!--cycle2 slideshow-->
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/20130409/jquery.cycle2.min.js"></script>
    <style>
    body {
    background: #000;
    font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
    color: #FFCC00;
    section {
    width: 940px;
    margin: 0 auto;
    background: #333;
    padding: 12px;
    /* Top Menu */
    nav {
    float: left;
    width: auto;
    height: 68px;
    nav ul {
    margin: 0;
    padding: 15px 0px 0px 5px;
    list-style: none;
    line-height: normal;
    nav li {
    display: block;
    float: left;
    nav a {
    display: block;
    float: left;
    padding: 20px 25px 0px 20px;
    letter-spacing: -1px;
    text-decoration: none;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    color: #FF9900;
    nav a:hover, nav a:active, nav a:focus {
    color: #FF9900;
    background-color: #333;
    /**text links**/
    a img { border: none }
    a { text-decoration: none }
    a:link { color: #FFCC00; }
    a:visited { color: #CCC; }
    a:hover, a:active, a:focus { text-decoration: underline }
    /**Slideshow**/
    .cycle-slideshow {
    clear:left;
    width: 500px;
    margin: 0 auto;
    .cycle-slideshow img {
    width: 526px;
    height: 345px;
    border: 4px solid #666
    .cycle-slideshow h4 {
    margin: 0;
    padding: 0;
    font-size: 36px;
    color: #CCC;
    text-align: center;
    </style>
    </head>
    <body>
    <section>
    <header>
    <img src="http://www.markjenkinsonphotography.com/MJP/MJP.png" alt="" width="858" height="48" id="Logo" />
    <nav>
    <ul>
    <li><a href="#" class="first">Homepage</a></li>
    <li class="current_page_item"><a href="blog.html">Blog</a></li>
    <li><a href="Portfolio.html">Portfolio</a></li>
    <li><a href="AboutMe.html">About</a></li>
    <li><a href="ContactUs.html">Contact</a></li>
    </ul>
    </nav>
    </header>
    <!--begin slideshow-->
    <div class="cycle-slideshow" data-cycle-fx="swipe"
                    data-cycle-slides="> div"
                    >
    <div>
    <img src="http://www.markjenkinsonphotography.com/MJP/arch0001.jpg" alt="" />
    <h4>caption 1</h4>
    </div>
    <div>
    <img src="http://www.markjenkinsonphotography.com/MJP/nat0001.jpg" alt="" />
    <h4>caption 2</h4>
    </div>
    <div>
    <img src="http://www.markjenkinsonphotography.com/MJP/ani0001.jpg" alt="" />
    <h4>caption 3</h4>
    </div>
    <div>
    <img src="http://www.markjenkinsonphotography.com/MJP/fam0001.jpg" alt="" />
    <h4>caption 4</h4>
    </div>
    <!--end slideshow-->
    </div>
    <hr>
    <article>
    <h1><a href="#">Welcome to Mark Jenkinson Photography</a></h1>
    <p>Welcome to Mark Jenkinson Photography. I hope you enjoy viewing the pictures as much as I have enjoyed shooting them.</p> <p>I am here to invite you into the albums, whether family events, days out with friends, day out with the children, or just your favourite locations snapped. If your interested, then contact me to find out more.</p>
    <h2><a href="#">MJP Partnership  with 'doo Dah Event Planning'</a></h2>
    <p><a href="http://www.doodahheventplanning.co.uk/default.html">
    <img src="http://www.markjenkinsonphotography.com/MJP/DooDahhEventPlanning.jpg" width="200" height="200" alt="" />
    </a></p> <p>Mark Jenkinson Photography has now formed a partnership with Samantha, founder of &quot;DooDahh Event Planning&quot;. Based in Ashford, Kent, she works with other suppliers as well as myself, to offer various packagebut specialising in weddings. Why not visit her website at http://www.doodahheventplanning.co.uk/default.html and see the excellent work she has done?</p> </article>
    <footer> <p>Copyright (c) 2013 Mark jenkinson photography - www.markjenkinsonphotography.com -  All rights reserved.</p> </footer>
    </section>
    </body>
    </html>
    Nancy O.

  • Why does my spry accordian look good in live view and switch back to default in safari

    i am new to dreamweaver and have started my first page-
    step one inserted a picture as a background
    step 2 inserted a spry accordian and have spent hours trying to configure it - my dreamweaver wont allow me to type any information in the design view so i worked out how to get around that in the code - so i put in the labels - changed the font
    then i got rid of any color by adding the hex value #0.0 (transparent) in the spryaccordian.css page  - which has worked really well in the live view ( and works in opera) but when i check it in safari it has reverted back to the default settings - it hasnt even kept the font settings
    i would also like to put quite a lot of information in the content panels (pictures, subscriber list, links ect, essentially whole pages) is this possible
    hoping someone can help me
    kind regards
    mandy evans

    Have a look at the following, just copy and paste into a new document in code view.
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    <script src="SpryAssets/SpryAccordion.js" type="text/javascript"></script>
    <link href="SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css">
    <style>
    html {
        background-color: #FF9;
    body {
        width: 960px;
        margin: auto;
    .Accordion {
        font: 14px "Comic Sans MS", cursive;
        color: #090;
    .AccordionPanelTab,
    .AccordionPanelOpen .AccordionPanelTab,
    .AccordionFocused .AccordionPanelTab,
    .AccordionFocused .AccordionPanelOpen .AccordionPanelTab {
        background-color: transparent;
    </style>
    </head>
    <body>
    <div id="Accordion1" class="Accordion" tabindex="0">
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">Label 1</div>
        <div class="AccordionPanelContent">Content 1</div>
      </div>
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">Label 2</div>
        <div class="AccordionPanelContent">Content 2</div>
      </div>
    </div>
    <script type="text/javascript">
    var Accordion1 = new Spry.Widget.Accordion("Accordion1");
    </script>
    </body>
    </html>
    Gramps

  • Why is it that I downloaded Firefox 4.0 but I do not have the orange firefox box in the upper left hand corner of screen. My screen still looks like the old verison of firefox. My screen does not look like the one in the video. looks nothing like the one

    My Firefox 4.0 does not look anything like the videos you show about the features of the new Firefox. My screen looks totally different than yours. It does not have the orange box in the upper left hand corner of the screen. My screen still looks like the old version. I have the logo on the top of my screen with Ask a Question a vertical line Firefox Help - Mozilla Firefox.
    Under this line I have File, Edit, View, History, Bookmarks, Tools, and Help. Below this line is a tab with Ask a Question Firefox Help and a +. My husbands screen looks identical to the orange Firefox Box in the upper left of screen. I would like my screen to look identical to the ones shown in your videos. I only have one version of Firefox 4.0 my husband does have the Firefox 4.0 plus the Beta version. How do I add the Beta version? I have Windows Vista running systems. Please help. Thank you

    You're welcome

Maybe you are looking for