12 Replies Latest reply: Jun 20, 2012 12:07 AM by Oby1KnOby RSS

    Broken preview mode

    Oby1KnOby Community Member

      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;}

        • 1. Re: Broken preview mode
          MurraySummers CommunityMVP

          > 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?

          • 2. Re: Broken preview mode
            Oby1KnOby Community Member

            No problems, here is the code of my main page:

             

            <!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>This is title</title>

             

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

             

            </head>

             

            <body>

            <div id="wrapper">

                    <div id="header"> <a href="/"><img src="/images/logo.png" width="250" height="96" alt="Kirill" /></a>

            </div>

                    <div id="nav">

                        <ul>

                            <li><a href="/index.html" title="Hi">Website</a></li>

                            <li><a href="/information.html" title="Kir">Information</a></li>

                            <li><a href="/" title="SA">One</a></li>

                            <li><a href="/" title="Peennnn">Two</a></li>

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

                        </ul>

                    </div>

                    <div id="sub-nav">

                        <ul>

                            <li><a href="/" title="Hi">Yo</a></li>

                            <li><a href="/" title="Kir">Ars</a></li>

                            <li><a href="/" title="SA">Bon</a></li>

                            <li><a href="/" title="Peennnn">Pen</a></li>

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

                        </ul>

                    </div>

                    <div id="content">

                        <h1>MyWebsite</h1>

                        <img src="/images/bike.jpg" width="216" height="207" alt="Bike1" class="img-right" />

                        <p>This is mybwesiteThis is mybwesiteThis is mybwesiteThis is mybwesiteThis is mybwesiteThis is mybwesiteThis is mybwesiteThis is mybwesiteThis is mybwesiteThis is mybwesiteThis is mybwesiteThis is mybwesiteThis is mybwesiteThis is mybwesiteThis is mybwesiteThis is mybwesiteThis is mybwesiteThis is mybwesiteThis is mybwesiteThis is mybwesiteThis is mybwesiteThis is mybwesiteThis is mybwesiteThis is mybwesiteThis is mybwesiteThis is mybwesiteThis is mybwesiteThis is mybwesiteThis is mybwesiteThis is mybwesiteThis is mybwesiteThis is mybwesiteThis is mybwesiteThis is mybwesiteThis is mybwesiteThis is mybwesite</p>

                       

             

                    </div>

                    <div id="footer"></div>

             

            </body>

            </html>

             

            Here is my style sheet:


            @charset "utf-8";

            /* CSS Document */

             

                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;}

                p {font-size:11px; color:#000; margin:6px 0px 12px 0px; line-height:18px; text-align:justify;}

                #header {margin:0; padding:0; height:100px; width:960px; background-color:#000;}

                #nav {margin:0; padding:0; height:31px; width:960px; clear:both;}

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

                        #nav ul li {height:31px; width:131px; margin-left:2px; padding:0; margin-top:0px; margin-bottom:0px; margin-right:0px; line-height:30px; float:left;}

                            #nav ul li a {color:#FFF; text-align:center; height:31px; width:131px;line-height:30px; display:block; background-image:url(/images/nav-sprite-131.png); background-position: 0px 0px; background-repeat:no-repeat;}

                                #nav ul li a:hover {color: red; text-decoration:none;background-position:0px -32px;}

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

                    #sub-nav ul {margin:0; padding:0; list-style-type:none;}

                        #sub-nav ul li {height:30px; width:146px; margin-left:2px; padding:0; background-color:#3F3;  margin-top:2px; margin-bottom:2px; margin-right:0px; line-height:30px;}

                            #sub-nav ul li a {color:#FFF; text-align:center; height:30px; width:146px; display:block;}

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

                #footer {width:960px; height:50px; margin:0; padding:0; background-color:#0C0; clear:both;}

                .img-right {float:right; margin:8px;}

            • 3. Re: Broken preview mode
              MurraySummers CommunityMVP

              <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?

              • 4. Re: Broken preview mode
                Oby1KnOby Community Member

                Nice! It worked, I didn't quite get what you meant by "Remake the link in DW, and change the Relative to: field to "Document"",
                But I have changed the preference + added </div> between footer and body. Everything looks super cool now! Thank you very much.

                • 5. Re: Broken preview mode
                  MurraySummers CommunityMVP

                  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....

                  • 6. Re: Broken preview mode
                    Oby1KnOby Community Member

                    Thank you, I will give it a try!
                    When I'm in preview mode the path is shown as "D:/mywebsite.com/wwwroot/TMP2v2q556x3x.htm" Is there any way I can have a propper path without "wwwroot" and TMP2v2... 

                     

                    And can anyone help me with adding two special boxes (twitter and facebook) in the navigation bar, which would look like this: navbar.jpg

                     

                    My nav code is the following:

                     

                    #nav {margin:0; padding:0; height:31px; width:960px; clear:both;}

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

                    #nav ul li {height:31px; width:131px; margin-left:2px; padding:0; margin-top:0px; margin-bottom:0px; margin-right:0px; line-height:30px; float:left;}

                    #nav ul li a {color:#FFF; text-align:center; height:31px; width:131px;line-height:30px; display:block;

                    background-image:url(../images/button2.png); background-position: 0px 0px; background-repeat:no-repeat; text-decoration :none;}

                     

                    Source:

                     

                    <div id="nav">

                    <ul>

                    <li><a href="/index.html" title="Hi">First</a></li>

                    <li><a href="/information.html" title="Kir">Second</a></li>

                    <li><a href="/" title="SA">Third</a></li>

                    <li><a href="/" title="Peennnn">Forth</a></li>

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

                    </ul>

                    </div>

                    • 7. Re: Broken preview mode
                      MurraySummers CommunityMVP

                      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.

                      • 8. Re: Broken preview mode
                        Oby1KnOby Community Member

                        I can't change the source code as it will change the whole navigation bar. I need to add two extra icons which are different from the rest on navigation buttons however remain in the same line. So the new "#" should be tailored to the existing code

                        • 9. Re: Broken preview mode
                          MurraySummers CommunityMVP

                          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.

                          • 10. Re: Broken preview mode
                            Oby1KnOby Community Member

                            I can't upload it yet, here is the full source code:

                             

                            @charset "utf-8";

                            /* CSS Document */

                             

                            body {margin:0; padding:0; background-color:#CCC; 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;}

                                p {font-size:11px; color:#000; margin:6px 0px 12px 0px; line-height:18px; text-align:justify;}

                                #header {margin:0; padding:0; height:100px; width:960px; background-color:#000; background-image: url(../images/logo.png);}

                                #top-nav-bar {margin:0; padding:0; height:31px; width:960px; float:left;}

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

                                #top-nav-bar ul li {height:31px; width:131px; margin-left:2px; padding:0; margin-top:0px; margin-bottom:0px; margin-right:0px;                             line-height:30px; float:left;}

                                #top-nav-bar ul li a {color:#FFF; text-align:center; height:31px; width:131px;line-height:30px; display:block;

                            background-image:url(../images/button2.png); background-position: 0px 0px; background-repeat:no-repeat; text-decoration:none;}

                                #top-nav-bar ul li a:hover {color: black; text-decoration:none;background-position:0px -32px;}

                             

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

                            #sub-nav ul {margin:0; padding:0; list-style-type:none;}

                            #sub-nav ul li {height:30px; width:146px; margin-left:2px; padding:0; background-color:#3F3;  margin-top:2px; margin-bottom:2px; margin-right:0px; line-height:30px;}

                            #sub-nav ul li a {color:#FFF; text-align:center; height:30px; width:146px; display:block; }

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

                            #footer {width:960px; height:50px; margin:0; padding:0; background-color:#0C0; clear:both;}

                            .img-right {float:right; margin:8px;}

                             

                             

                            Here is the page:

                            <!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>Document Title</title>

                             

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

                             

                             

                            <body>

                            <div id="wrapper">

                                    <div id="header"></div>

                                    <div id="top-nav-bar">

                                    <ul>

                                            <li><a href="/index.html" title="Hi">Learn</a></li>

                                            <li><a href="/information.html" title="Kir">Lern2</a></li>

                                            <li><a href="/" title="SA">Learn 3</a></li>

                                            <li><a href="/" title="Peennnn">Learn 4</a></li>

                                            <li><a href="/" title="MO">Learn 5</a></li>

                                        </ul>

                                        </div>

                             

                             

                             

                             

                            <div id="sub-nav">

                                        <ul>

                                            <li><a href="/"title="Hi">Hello</a></li>

                                            <li><a href="/" title="Kir">Ars</a></li>

                                            <li><a href="/" title="SA">B</a></li>

                                            <li><a href="/" title="Peennnn">Pe</a></li>

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

                                        </ul>

                            </div>

                                    <div id="content">

                                        <h1>MyWebsite</h1>

                                        <img src="/images/bike.jpg" width="216" height="207" alt="Bike1" class="img-right" />

                                        <p>This is mybwesiteThis is mybwesiteThis is mybwesiteThis is mybwesiteThis is mybwesiteThis is mybwesiteThis is mybwesiteThis is mybwesiteThis is mybwesiteThis is mybwesiteThis is mybwesiteThis is mybwesiteThis is mybwesiteThis is mybwesiteThis is mybwesiteThis is mybwesiteThis is mybwesiteThis is mybwesiteThis is mybwesiteThis is mybwesiteThis is mybwesiteThis is mybwesiteThis is mybwesiteThis is mybwesiteThis is mybwesiteThis is mybwesiteThis is mybwesiteThis is mybwesiteThis is mybwesiteThis is mybwesiteThis is mybwesiteThis is mybwesiteThis is mybwesiteThis is mybwesiteThis is mybwesiteThis is mybwesite</p>

                             

                            <p>

                            Text 2

                            </p>

                             

                             

                                    </div>

                                    <div id="footer"></div>

                                    </div>

                             

                            </body>

                            </html>

                             

                            So as I mentioned before I need to make extra icons with different functions *facebook/twitter) in the #top-nav-bar.

                            • 11. Re: Broken preview mode
                              MurraySummers CommunityMVP

                              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.

                              • 12. Re: Broken preview mode
                                Oby1KnOby Community Member

                                Thank you for your help, all sorted now!

                                Can anyone please help me with my drop down menu?

                                The sub navs (NAV 1.1, NAV 1.2) that should drop down from NAV1 are displayed like the the main nav, wheras they should drop down when pointing on NAV 1.

                                And they are also ligned in horizontally not vertically :/

                                Can anyone please tell me what did I do wrong?

                                nav.jpg

                                 

                                Here is the source 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>My Website</title>

                                 

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

                                 

                                 

                                <body>

                                <div id="wrapper">

                                        <div id="header"></div>

                                 

                                  <ul id="nav">

                                        <ul>

                                                <li>

                                                <a href="index.html" title="Hi">NAV 1</a>

                                                    <ul>

                                                    <li><a href="#">NAV 1.1</a></li>

                                                    <li><a href="#">NAV 1.2</a></li>

                                                     </ul>

                                                </li>

                                                <li><a href="/studyinuk.html" title="Kir">NAV 2</a></li>

                                                <li><a href="/" title="SA">NAV 3</a></li>

                                                <li><a href="/" title="Peennnn">NAV 4</a></li>

                                                <li><a href="/" title="MO">NAV 5</a></li></ul>

                                  </ul>

                                </div>    

                                 

                                 

                                </body>

                                </html>

                                 

                                Here is the style:

                                 

                                @charset "utf-8";

                                /* CSS Document */

                                 

                                 

                                    body {margin:0; padding:0; background-color:#CCC; 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;}

                                    p {font-size:11px; color:#000; margin:6px 0px 12px 0px; line-height:18px; text-align:justify;}

                                    #header {margin:0; padding:0; height:100px; width:960px; background-color:#000; background-image: url(../images/logo.png);}

                                       

                                       

                                    #nav {margin:0; padding:0; height:31px; width:750px; float:left;}

                                    #nav li{float:left;margin-right:10px;position:relative;}

                                    #nav a{display:block;padding:5px;color:#fff;background:#333;text-decoration:none;}

                                    #nav a:hover{color:#fff;background:#6b0c36;text-decoration:underline;}

                                   

                                    /*--- DROPDOWN ---*/

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

                                    #nav ul li {height:31px; width:131px; margin-left:2px; padding:0; margin-top:0px; margin-bottom:0px; margin-right:0px;                             line-height:30px; float:left;}

                                    #nav ul a {white-space:nowrap;}

                                    #nav ul a{

                                    white-space:nowrap;}

                                    #nav li:hover ul{left:0;}

                                    #nav li:hover a{ background:#6b0c36;text-decoration:underline;}

                                    #nav li:hover ul a{text-decoration:none;}

                                    #nav li:hover ul li a:hover{ background:#333;}