7 Replies Latest reply: Feb 3, 2011 12:20 PM by John Waller RSS

    Page looks terrible in Dreamweaver, but fine in (some) browsers?

    Budo Cat Community Member

      Can someone please explain why the image in Design and Split views can look so radically different from what I get in a browser? In the example below, the page as presented in Design looks a total mess (screenshot 1). But in Firefox, Chrome and Safari, it looks fine (screenshot 2).

       

      I've had this problem a couple of times in the past, but since the pages worked on the browsers, and thus the web, I wasn't concerned. In this particular instance, however, the page is still a mess in Opera (screenshot 3), albeit a different mess than is presented in Design/Split views. (I don't have Explorer to check it on).

       

      So I thought it time to ask, what am I not getting about Dreamweaver? Screenshots below to illustrate my question. CSS and HTML also down there, if that helps.

       

      Thank you.

       

       

      In Design and Split Views:

      Screen shot 2011-01-31 at 11.45.04 AM.png

       

       

      In Firefox/Chrome/Safari:

       

      }Screen shot 2011-01-31 at 11.45.25 AM.png

       

      In Opera:

       

      Screen shot 2011-01-31 at 11.46.19 AM.png

       

       

       

      HTML

      <body>
      <div id="wrapper">
      <div id="header">
           
      </div><!--close header-->
      <div id="navbar">
      <p><a href="index.html">home</a></p>
      <p><a href="benefits.html">benefits</a></p>
      <p><a href="clients.html">clients</a></p>
      <p><a href="about.html">about</a></p>
      <p><a href="history.html">history</a></p>
      <p><a href="contact.html">contact</a></p>

       

      </div><!--close navbar-->
      <div id="mainbody"><!-- InstanceBeginEditable name="mainBody" -->
      <div class="rosenPhoto"><img src="../images/MarionRosen.jpg" width="470" height="313" alt="Marion Rosen" /><br />
      Photo credit and copyright details go here</div>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p> 
      <!-- InstanceEndEditable --></div>
      <!--close mainbody-->

       


      </div><!--close wrapper-->
      </body>
      <!-- InstanceEnd --></html>

       

       

       

       

      CSS

      @charset "UTF-8";
      body {
           width: 1024px;
           margin: 0 auto;
           background-color: #4B4CB6;
           background-image: url(../images/bgGradient.jpg);
           background-repeat: repeat-x;
      }
      #wrapper {
           height: 768px;
           width: 1024px;
           background-image: url(../images/mesh.png);
           padding-top: 1px;
      }
      #wrapper #header {
           height: 100px;
           width: 912px;
           margin: 49px 54px 0 54px;
           background-color: #000032;
           border: 2px solid #b3aaa1;
           }
      #wrapper #navbar {
           background-color: #000032;
           height: 540px;
           width: 155px;
           margin-left: 54px;
           float: left;
           border-width: 0 1px 2px 2px;
           border-style: solid;
           border-color: #b3aaa1;
           font-family: Verdana, Geneva, sans-serif;
           font-size: 24px;
           color: #b3aaa1;
           text-align: left;
          
      }
      #wrapper #mainbody {
           height: 540px;
           width: 755px;
           float: left;
           border-width: 0 2px 2px 1px;
           border-style: solid;
           border-color: #b3aaa1;
           background-image: url(../images/gradient.jpg);
           background-repeat: repeat-y;
      }

       

      #wrapper #header #headerLeft {
           padding-left: 15px;
           padding-top: 15px;
           float: left;
      }
      #wrapper #header #headerRight img {
           float: right;
           padding-top: 20px;
           padding-right: 90px;
      }

       

      #wrapper #navbar p {
           margin-top: 50px;
           margin-left: 30px;
      }

       


      #wrapper #mainbody img {
           float: right;
      }
      #wrapper #mainbody p {
           font-family: Verdana, Geneva, sans-serif;
           color: #B3aaa1;
           font-size: 14px;
           margin: 25px 20px 0 20px;
      }
      #wrapper #mainbody ul li {
           font-family: Verdana, Geneva, sans-serif;
           font-size: 14px;
           color: #b3aaa1;
      }
      #wrapper #mainbody h2 {
           color: #B3AAA1;
           margin-left: 20px;
           margin-top: 25px;
      }
      a:link {
           color:#B3AAA1;
           text-decoration:none;
           }
      a:visited {
           color:#B3AAA1;
           text-decoration:none;
           }
      a:hover {
           color:#CCC;
           text-decoration:underline;
           } 
      a:active {
           color:#B3AAA1;
           text-decoration:none;
           }
      .rosenPhoto {
           float: right;
           margin: 0;
           padding: 0 0 0px 10px;
           font-size: 11 pt;
           text-align: right;
           color: #000;

      }

        • 1. Re: Page looks terrible in Dreamweaver, but fine in (some) browsers?
          John Waller CommunityMVP

          Any chance you can start uploading these pages and provide a link?

           

          You'll get many more responses than asking people to view screenshots and trawl through code.

           

          Everyone has various diagnostic tools and browser plugins that can quickly validate code, analyse pages online and spot issues.

          • 2. Re: Page looks terrible in Dreamweaver, but fine in (some) browsers?
            Budo Cat Community Member

            John,

             

            Thanks. I can't upload the page until the client gives me an OK, which won't happen until I get the final edited content.

             

            I did figure out part of the problem, though: CSS coding for the photo was wrongly coded as .rosenPhoto, rather than #rosenPhoto. Now all the pages look the same. Still wrong, but the same.

             

            I'm assuming that past issues were due to similar errors.

             

            Thanks for responding.

            • 3. Re: Page looks terrible in Dreamweaver, but fine in (some) browsers?
              Budo Cat Community Member

              (sorry for twice-posted reply....)

              • 4. Re: Page looks terrible in Dreamweaver, but fine in (some) browsers?
                John Waller CommunityMVP

                Thanks. I can't upload the page until the client gives me an OK, which won't happen until I get the final edited content.


                Many people are in a similar position here.

                 

                They upload their page to temporary webspace (even a subdirectory of the real site), get their question answered then pull the page down again.

                 

                Just a thought to help you get more replies :-)

                • 5. Re: Page looks terrible in Dreamweaver, but fine in (some) browsers?
                  SnakEyez02 CommunityMVP

                  John has a point.  Or at least if you are going to post the code, post  all of it.  From the code you posted, looking strictly at the HTML, you  have no document type defined, nor is a CSS document included, so I  would ask if this CSS in written in the head or what type of HTML should  I help you validate against (eg: XHTML, HTML).

                   

                  But  from your description and screenshot the issue is the floating.  You are  floating 2 objects next to one another without a clear declaration.  So  because of this, Dreamweaver's design view is setting the clear  attribute for you.  If you clear:none; on your mainbody div, it should  fix the DW display issue without affecting the Firefox/Webkit layout  (when I say Webkit I am referring to Safari & Chrome).

                   

                  With regards to the Opera issue, I am looking at your <p> tag right after the rosenphoto div.  P tags have inherit properties and I am assuming this is what is happening here.  Surround this with a container tag and see if that helps any.

                  • 6. Re: Page looks terrible in Dreamweaver, but fine in (some) browsers?
                    Budo Cat Community Member

                    John and SnakEyz02,

                     

                    Thank you both. Loading the page and then taking it down is an obvious solution. No wonder I never thought of it.

                     

                    At this point, I think my problem is a CSS issue, although a weird one. The page still looks a mess in Dreamweaver, but fine when I check the browsers -- except in Opera, which is still a mess.

                     

                    I suppose the better place to post this question now is on either a CSS or Opera support site, rather than Dreamweaver. But thank you for responding to my query, and for the excellent suggeston on putting pages up. I shall do so for future questions, which there are sure to be plenty more of.

                    • 7. Re: Page looks terrible in Dreamweaver, but fine in (some) browsers?
                      John Waller CommunityMVP

                      I suppose the better place to post this question now is on either a CSS or Opera support site, rather than Dreamweaver.


                      This forum is quite versatile and answers all sorts of web related questions.

                       

                      Provide a link and someone will probably reply.