4 Replies Latest reply on Mar 27, 2010 11:34 AM by playz123

    Appearance of content in Design view vs browser

    playz123 Level 1

      Q: Please see attached image. Does the appearance of content as viewed in Dreamweaver's Design mode matter as much as when the added content is viewed in a browser?

       

      Okay, this is definitely a beginner's question, but sadly not one that seems to have been addressed in my tutorial book. Please note the attached image. I have a div inside a container into which I wish to add some text content etc. In order to get the content to appear correctly where I want it when viewed in a browser, I actually have to space it further apart in Dreamweaver's Design view. When I do,  the bottom boundary of the Div (as seen in Design view...in yellow), seems to expand beyond the set dimensions of the div itself. However, as seen in the image on the right, it's exactly where it should be in the browser.


      a) So is the fact it appears to extend beyond the actual div borders in DWr a problem, or is it perfectly acceptable?


      b) In the tutorial book, they often had me just paste in preformatted content then apply CSS styles to it, and the result looked to have the same spacing in DWvr as in the browser. It was just paragraph and header coded, as my content will be. Why the difference in appearance, and how can I get my content to fit inside the div in the same location as it then appears in the browser?

      Design_mode.jpg
      As always, any assistance or information would be greatly appreciated. Thank you..............frank

        • 1. Re: Appearance of content in Design view vs browser
          Nancy OShea Adobe Community Professional & MVP

          Design View is nothing more than a close approximation of what you will see in most major browsers.  Owing to browser default settings, end-user preferences and other variables, no web authoring application is capable of 100% reliable WYSIWYG.

           

          1) Use valid markup and CSS code to ensure best cross browser rendering.

           

          Code validation tools
          CSS - http://jigsaw.w3.org/css-validator/
          HTML - http://validator.w3.org/

           

          2) During the design phase, be sure to check your page often in web standards compliant browsers like Firefox, Chrome or Safari.  Then check again in non-standards compliant browsers IE6, 7, 8.  If needed, use Conditional Comments or hacks to create CSS rules specifically targeting IE browsers.

           

          3) Zero out default browser settings on everything with the CSS universal selector (*) by adding this line of code to your external CSS file:

           

          * {margin:0; padding:0; font-size: 100%; line-height: 100%}

           

          Or by adding it to the embedded CSS code in your html document.

           

          <style type="text/css">

           

          * {margin:0; padding:0; font-size: 100%; line-height: 100%}

           

          </style>

           

          If this doesn't help, you'll need to post a URL to your test page so we can examine your CSS and HTML code.

           

           

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

          • 2. Re: Appearance of content in Design view vs browser
            playz123 Level 1

            Hi Nancy,

            Once again thank you for your prompt and informative response. To begin, it appears that you are then saying that the fact (that in Design view) my formatted content appears to extend beyond the set dimensions of the div doesn't matter at all...as long as it looks as intended in a browser. Is that correct?

             

            Now, re your suggestions:

            1) Thanks for the links; they will be useful when I upload the page to a server.

            2) Am definitely doing that. Page is being checked in the latest versions of Firefox and IE8, and some coding has been applied so that the page is compatible with older versions of IE.

            3) You suggested that in a previous reponse, it was done, and the code is embedded and working as expected. But thank you once again. I've kept your tip on file, and will refer to it in the future.

            4) I think your response has answered my main question, but I just want to definitely confirm that the answer is "don't worry about what you always see in Design view. What you are experiencing is a normal occurrence, and as long as it looks fine in the browers, that should be the definitive test"

             

            Thanks again..............frank

            • 3. Re: Appearance of content in Design view vs browser
              Nancy OShea Adobe Community Professional & MVP

              Right. Don't worry about Design View. Pay attention to what browsers do.

               

              TOOLS FOR CROSS BROWSER TESTING

               

              Browser & Platform compatibility checker (screenshots)-
              http://Browsershots.org

               

              DebugBar Multiple IE checker - (download)
              http://www.my-debugbar.com/wiki/IETester/HomePage

               

              Adobe Browser Lab - (on-line)
              https://browserlab.adobe.com/

               

               

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

              • 4. Re: Appearance of content in Design view vs browser
                playz123 Level 1

                Got it! Again, Nancy, thank you! Cheers..........

                frank