Skip navigation
Oby1KnOby
Currently Being Moderated

Broken preview mode

Jun 4, 2012 10:45 PM

Tags: #cs4 #help #error #html #dreamweaver #code #dw

This is how my website looks in dreamweaver:

aaa1.jpg

 

However this is what I get in my firefox browser while in preview mode:

aaa2.jpg

 

Can anyone tell me what did I do wrong? Full path:

file:///D:/mywebsite.com/wwwroot/index.html

 

 

 

And another question, for some reason the content div tag has moved to the right side of the screen for no particular reason,  which makes the spacing between the left navigation and the content too big (too much space between them) I can't find anything wrong in the code:

aaa3.jpg

 

body {margin:0; padding:0; background-color:#900; font-family:Verdana, Geneva, sans-serif; font-size:12px; color:#000;}

#wrapper {width:960px; background-color:#FFF; margin-top:0; margin-right:auto; margin-bottom:0; margin-left:auto;}

#sub-nav {margin:0; padding:0; width:150px; background-color:#666; float:left;}

#content {width:770px; background-color:#FFF; margin:0px 20px 0px 20px; padding:0; float:right;}

 
Replies
  • Currently Being Moderated
    Jun 5, 2012 4:27 AM   in reply to Oby1KnOby

    > Can anyone tell me what did I do wrong?

     

    Your question should be "What would cause a page that looks right in Design view not to load the stylesheet on preview?"  And the answer to that question is most often that you have made the link to the stylesheet a root relative one, not a document relative one.  Root relative links are not resolved as expected on preview since the browser has no idea where the root of the site is.  We can know for sure if that's the case by seeing your page's code.  Can you show us?

     

    > for some reason the content div tag has moved to the right side of the screen for no particular reason

     

    I'm betting there's a very good reason this is happening, but again without seeing the full HTML and CSS code for the page, we cannot know.

     

    Can you help us help you?

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 5, 2012 10:59 AM   in reply to Oby1KnOby

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

     

     

    Yes - this is definitely a root relative link to the stylesheet - that's why it's not being found when you preview the page.  You can solve this two ways:

     

    1. Use a document relative link instead of a root relative link.  There is really no reason I can see to use a root relative link for this.  Remake the link in DW, and change the Relative to: field to "Document".

    2. Leave the link as it is and enable PREFERENCES > Preview in Browser > Preview using temporary file.

     

    The latter fix will work across all sites and will mean that when you preview a page, all root relative links in the pages will be converted (silently) to document relative links (among other things).  It's how I'm usually configured.

     

    With regard to your content div tag, try adding the missing </div> between the footer <div> and the </body> tag.  Does that help?

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 5, 2012 11:26 AM   in reply to Oby1KnOby

    I didn't quite get what you meant by "Remake the link in DW, and change the Relative to: field to "Document"",

     

    Open the page, and DELETE the link to the stylesheet (do this in code view).  Then, with the cursor still blinking in the spot where that link was, click on the LINK icon at the bottom of the CSS panel, and then click on the BROWSE icon to browse to and select the stylesheet. While you are there on that dialog panel, find the "Relative to:" field, and set it to "Document".  Click OK and OK.  That's what I meant.

     

    Glad it worked....

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 6, 2012 4:47 AM   in reply to Oby1KnOby

    When I'm in preview mode the path is shown as "D:/mywebsite.com/wwwroot/TMP2v2q556x3x.htm"

     

    The "TMP2..." shows that you are previewing with DW's temp files.  The idea is that when you preview a page and have temporary files enabled, before handing the page to be previewed to the browser, DW silently builds a temp file that contains a) all root relative links converted to absolute file links, and b) all external CSS and javascript embedded in the page.  The temp file is then given a random name and handed to the browser.  It does this to make sure that you actually load all of the *dependent* files necessary for the proper display of the page.

     

    If preview with temp files is NOT enabled, you cannot preview a page without first saving it.  That means that you have no option to make changes and preview the result of those changes without saving that changed file and overwriting the previous version.  In addition, previewing in this mode means that all root relative links will be broken (as far as the browser is concerned, there is only ONE ROOT, i.e., the root of the hard drive.  The browser has no knowledge of where the root of the site is - once you leave DW you have left that information behind.).

     

    The actual path shown for the link in a previewed page is normal since the links have all been converted to absolute ones.

     

    So, it's a choice - which way do you want it?  As mentioned earlier, I'm almost always working with temp files enabled. But if you are troubled by these things, then just always use document relative links.  There is a very good reason to use root relative links at times, but that would be a topic for another thread.  Until you begin using server-side includes, you will likely not ever need to use root relative links.

     

     

    And can anyone help me with adding two special boxes (twitter and facebook) in the navigation bar

     

    It could be as simple as changing this -

     

    <li><a href="/" title="MO">Fifth</a></li>

    </ul>

    </div>

     

    to this -

     

    <li><a href="/" title="MO">Fifth</a></li>

    </ul>

    <a href="facebooklink"><img></a>

    <a href="twitterlink"><img></a>

    </div>

     

    and this -

     

    #nav ul {margin:0; padding:0; list-style-type:none; width:960px; clear:both;}

     

    to this -

     

    #nav ul {margin:0; padding:0; list-style-type:none; width:760px; display:inline-block;}

     

    The only concern is that there needs to be enough room to the right of the #nav ul element to accommodate the two images.

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 6, 2012 6:58 AM   in reply to Oby1KnOby

    I can't change the source code as it will change the whole navigation bar.

     

    Upload the actual page please and post a link to it so I can see the code and the nav bar.  The changes I gave you were tailored to the existing code as far as I could tell.

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 7, 2012 4:54 AM   in reply to Oby1KnOby

    This code is missing the </head> tag - your earlier post was not.  Is that just an unintentional typo?

     

    Anyhow, you have plenty of room on the right of your navigation element to place these social media images.  Reducing the width of the #top-nav-bar ul rule will free up that space for your use without compromising the navigation element.  My earlier suggestion will still work.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points