14 Replies Latest reply: Oct 6, 2010 3:24 PM by Nancy O. RSS

    Safari preview problem

    Budo Cat Community Member

      My pages preview fine in Firefox, Opera and Chrome, as well as "Live View." But when I preview them in Safari, there is no spacing between the paragraphs. All the type looks like one big paragraph. Also, my photos in Safari do not float right (per my CSS rule). Rather, they're on on the left side or center of the page.

       

      Is this a Safari glitch, and if so, how can I correct? Or is it a problem with my code? I suspect it's the latter, but I've reviewed it for hours and cannot find anything amiss.

       

      (Also, in a slightly related question, I can preview my pages in Chrome only if I open the browser, then click on File > Open File. When I try to open Chrome with the little globe icon in Dreamweaver, I get a page that reads, "This webpage is not found. No webpage was found for the web address...." Any suggestions on how I can get Chrome to preview pages with the icon, or is this a common problem?)

       

      I'd be very grateful to anyone who can help. Coding follows:

       

      CSS:

      * {
          margin-right: auto;
          margin-left: auto;
      }
      #wrapper {
          background-image: url(../templates2/mainBody.jpg);
          background-repeat: repeat;
          overflow: hidden;
          width: 800px;
          background-color: #CCC;
      }
      #wrapper #header {
          height: 150px;
          width: 800px;
          background-color: #CCC;
          background-image: url(../templates2/header.jpg);
      }
      #wrapper #navBar {
          height: 55px;
          width: 800px;
          background-color: #666;
          background-image: url(../templates2/navBar.jpg);
      }
      #wrapper #mainBody {
          width: 80%;
          padding-top: 20px;
          font-family: Arial, Helvetica, sans-serif;
          font-size: 14pt;
      }
      #wrapper #footer {
          background-image: url(../templates2/footer.jpg);
          width: 800px;
          height: 60px;
          text-align: center;
          font-size: 16pt;
      }
      .intro {
          font-style: italic;
      }
      img {
          margin-top: 15px;
          margin-bottom: 15px;
          margin-left: 20px;
          float: right;
          border: 1px solid #000;
      }
      .byline {
          font-weight: bold;
          text-align: center;
      }
      .tagline {
          font-style: italic;

       

       

      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>2000_template</title>
      <!-- TemplateEndEditable -->
      <link href="../CSS/layout.css" rel="stylesheet" type="text/css" />
      <style type="text/css">
      <!--
      -->
      </style>
      <!-- TemplateBeginEditable name="head" -->
      <!-- TemplateEndEditable -->
      <script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
      <link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
      </head>

       

      <body>
      <div id="wrapper">
      <div id="header"></div><!--close header-->
      <div id="navBar">
        <ul id="MenuBar1" class="MenuBarHorizontal">
          <li><a href="#">home</a>      </li>
          <li><a href="#">about</a></li>
          <li><a href="#">menu</a></li>
          <li><a href="#">contact</a></li>
          <li><a class="MenuBarItemSubmenu" href="#">index</a>
            <ul>
              <li><a class="MenuBarItemSubmenu" href="#">topic name</a>
                <ul>
                  <li><a href="#">Item 3.1.1</a></li>
                  <li><a href="#">Item 3.1.2</a></li>
                </ul>
              </li>
              <li><a href="#">Item 3.2</a></li>
              <li><a href="#">Item 3.3</a></li>
            </ul>
          </li>
      </ul>
      </div><!--close navBar-->
      <div id="mainBody"><!-- TemplateBeginEditable name="mainContent" -->
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dolor libero, aliquam vitae scelerisque in, malesuada non neque. </p>
       
        <p>Phasellus dignissim arcu eget velit posuere vel varius magna dapibus. Phasellus pharetra imperdiet nunc, vel interdum dolor fermentum id. Integer luctus mollis tempor. Nunc lacus urna, blandit sollicitudin cursus at, ultrices et erat. Sed rhoncus, ipsum vitae dictum scelerisque, diam felis euismod augue, a facilisis massa augue ut nibh. </p>
       
        <p>Sed ac ante magna. Nulla consequat posuere ullamcorper. In interdum, elit sed tempor suscipit, quam mauris egestas justo, sed lobortis sem magna a mi. Etiam tincidunt fringilla sapien, congue condimentum augue adipiscing ut. Nam pretium egestas lacus in elementum. Vivamus eros erat, varius nec aliquam quis, congue at orci.</p>

       


      <!-- TemplateEndEditable --></div>
      <!--close main body-->
      <div id="footer"><!-- TemplateBeginEditable name="footerPage" -->
        <p> << Previous 1 :: 2 :: 3 :: 4 Continue >></p>
      <!-- TemplateEndEditable --></div><!--close footer-->
      </div><!--close wrapper-->
      <script type="text/javascript">
      <!--
      var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
      //-->
      </script>
      </body>
      </html>

        • 1. Re: Safari preview problem
          Nancy O. CommunityMVP

          Get rid of this:

           

          * {
              margin-right: auto;
              margin-left: auto;

           

          If you want your page centered, add margin:0 auto to your #wrapper.

           

           

          HINT: Posting a link to your web page so we can see it in our browsers will save much time.

           

           

          Nancy O.
          Alt-Web Design & Publishing
          Web | Graphics | Print | Media  Specialists
          http://alt-web.com/
          http://twitter.com/altweb

          • 2. Re: Safari preview problem
            Budo Cat Community Member

            Nancy,

             

            Thank you for the quick response. Unfortunately, it didn't work. Not only did Safari continue to show the page without space between the paragraphs, but I completely lost my left margin (page is 800 px wide, with mainbody  set at 80 percent). Any other suggestions?

             

            (Re posting a link: The site isn't online yet. Hope to be soon, once I get more of my pages built....)

            • 3. Re: Safari preview problem
              Nancy O. CommunityMVP

              #1 The CSS universal selector (*) should not be used to add margins as this will effect every single element in your site.

              Apply margins only where needed.

               

              #wrapper {

              width: 800px;

              margin: 0 auto;  /**centered**/

              }

               

              #mainBody {

              width: 80%;

              margin: 0 auto; /**centered**/

              }

               

               

              Nancy O.
              Alt-Web Design & Publishing
              Web | Graphics | Print | Media  Specialists
              http://alt-web.com/
              http://twitter.com/altweb

              • 4. Re: Safari preview problem
                Budo Cat Community Member

                Thank you. That restores my margins. But Safari still won't give me space between paragraphs, or float photos to the right.

                 

                (Don't know if it's related, but I've also discovered that I cannot open my template on Safari via File>Open File, as I can on other browsers. I can open my pages that way, and I can open all pages as well as template with the Dreamweaver globe icon. But I can't access the template directly through the browser itself.)

                 

                Very frustrating. But thank you again for your help. New CSS coding, if you have any more time to put into this, is below.

                 

                * {  

                }
                #wrapper {
                    background-image: url(../templates2/mainBody.jpg);
                    background-repeat: repeat;
                    overflow: hidden;
                    width: 800px;
                    margin: 0 auto;
                    background-color: #CCC;
                }
                #wrapper #header {
                    height: 150px;
                    width: 800px;
                    background-color: #CCC;
                    background-image: url(../templates2/header.jpg);
                }
                #wrapper #navBar {
                    height: 55px;
                    width: 800px;
                    background-color: #666;
                    background-image: url(../templates2/navBar.jpg);
                }
                #wrapper #mainBody {
                    width: 80%;
                    margin: 0 auto;
                    padding-top: 20px;
                    font-family: Arial, Helvetica, sans-serif;
                    font-size: 14pt;
                }
                #wrapper #footer {
                    background-image: url(../templates2/footer.jpg);
                    width: 800px;
                    height: 60px;
                    text-align: center;
                    font-size: 16pt;
                }
                .intro {
                    font-style: italic;
                }
                img {
                    margin-top: 15px;
                    margin-bottom: 15px;
                    margin-left: 20px;
                    float: right;
                    border: 1px solid #000;
                }
                .byline {
                    font-weight: bold;
                    text-align: center;
                }
                .tagline {
                    font-style: italic;
                    }

                • 5. Re: Safari preview problem
                  Nancy O. CommunityMVP

                  AFAIK, Template (.dwt) files don't open in Firefox, Safari, Chrome or Opera. Only IE opens them.  You must spawn child pages to preview in browsers.

                   

                  That said,  my adivce is to iron out all your code, CSS and browser problems BEFORE you create a template.  Making a page into a Template should be a final step; not the first.

                   

                   

                  Nancy O.
                  Alt-Web Design & Publishing
                  Web | Graphics | Print | Media  Specialists
                  http://alt-web.com/
                  http://twitter.com/altweb

                   

                   

                   

                   

                   

                  .

                  • 6. Re: Safari preview problem
                    Budo Cat Community Member

                    Perhaps I misunderstand something, but I have been able to open the DWT file in Opera, Chrome and Firefox. Using Safari, though, only opens the Finder on my Mac.

                     

                    That said, your suggestion is probably spot on, and exactly what I didn't want to hear: Start over.

                     

                    Damn.

                     

                    I was sure that I'd tested the template in all browsers, including Safari, before proceeding. That's why I suspected that my coding and not the browser  was the problem. At some point, I must have introduced an error.

                     

                    Oh well.

                     

                    Thank you again for your help.

                    • 7. Re: Safari preview problem
                      bemdesign Community Member

                      Yeah start with just building a generic HTML page and then, when you have everything ironed out and know how you want to set-up your template, create your Dreamweaver template.

                       

                      Also as you start developing more complex sites (more then 50 pages with several different page styles) you may want to consider not using Dreamweaver templates and instead learn about Server Side Includes.

                      • 8. Re: Safari preview problem
                        Budo Cat Community Member

                        Thank you. I will check out server side includes. This is my first website, about 55 pages, but (I hope) only one template/page style.

                         

                        I'm almost certain that the page looked OK in Safari when I converted it into a template. But I made some adjustments later without going back to the browser. My bad. I spent another couple of hours last night trying to figure out the problem, but only got a headache for my time.

                        • 9. Re: Safari preview problem
                          Nancy O. CommunityMVP

                          I don't see anything special in your posted CSS or HTML that would explain no-line heights and no-margins on paragraphs.  Perhaps, there is something in your Spry code that is misbehaving.   At any rate, without a link to your problem page it's impossible for us to help you.

                           

                          Run your code through the validation tools below and see if this sheds any light.

                           

                          Code Validation Tools
                          ------------------------------------
                          CSS - http://jigsaw.w3.org/css-validator/
                          HTML - http://validator.w3.org/

                           

                           

                          Nancy O.
                          Alt-Web Design & Publishing
                          Web | Graphics | Print | Media  Specialists
                          http://alt-web.com/
                          http://twitter.com/altweb

                          • 10. Re: Safari preview problem
                            Budo Cat Community Member

                            Thank you, Nancy. The sites are a great resource, but they didn't find any errors. They even offered me W3C validator icons to put on my pages.

                             

                            I'm wondering if my problem is with my settings, not code. I created a new page this morning to build a new template. But when I add text, there's no space between any the paragraphs -- not in Design View, Split View or any of the browser previews.

                             

                            The pages and template I was working off of yesterday still look good in everything but Safari. But in the new document, everything is single-spaced.

                             

                            Maybe I should just work off of a typewriter and scan my pages to the web....

                             

                            I will post my URL here once the site is up. Thanks always for your help. I'm very grateful.

                            • 11. Re: Safari preview problem
                              Nancy O. CommunityMVP
                              But when I add text, there's no space between any the paragraphs -- not in Design View, Split View or any of the browser previews.

                               

                              That's very odd.

                               

                              You're not pasting content from MS Word, Outlook or other apps are you?

                               

                               

                              Nancy O.
                              Alt-Web Design & Publishing
                              Web | Graphics | Print | Media  Specialists
                              http://alt-web.com/
                              http://twitter.com/altweb

                              • 12. Re: Safari preview problem
                                Budo Cat Community Member

                                No. I just discovered that the problem was with the universal selector. I had "0" for all four sides in margin and padding. That turned all paragraphs into one block of text in all browsers, as well as Design and Split Views. When I removed the zeros from the universal selector, paragraphs returned... except in Safari.

                                 

                                I'm now building a new page without a universal selector, and previewing on Safari step-by-step. Will let you know if I ever figure it out.

                                 

                                Thanks again.

                                • 13. Re: Safari preview problem
                                  Budo Cat Community Member

                                  Safari solve.

                                   

                                  Emptied my Safari cache, then previewed my pages again. Layout now looks just as it does in the other browsers, space and all.

                                   

                                  All this time I was chasing ghosts.

                                   

                                  Thanks again, Nancy. I appreciate all the help.

                                  • 14. Re: Safari preview problem
                                    Nancy O. CommunityMVP

                                    All this time I was chasing ghosts.

                                     

                                    Argh! It happens to all of us.  Really glad you got it sorted.

                                     

                                     

                                    Nancy O.
                                    Alt-Web Design & Publishing
                                    Web | Graphics | Print | Media  Specialists
                                    http://alt-web.com/
                                    http://twitter.com/altweb