5 Replies Latest reply: Mar 21, 2007 10:15 AM by Newsgroup_User RSS

    CSS rendering in design window

    jaymcdonald Community Member
      I am doing some simple CSS layout (nothing tricky at all), and noticing that there are significant differences between how the page looks in a browser, and how it looks in Dreamweaver. The layout is 3 floated columns with header and footer - a total of 5 DIVs. All are positioned 'relative', and there are right, left, and bottom margins of 10px on the center column to set the gutters between columns and between the main column and the footer.

      Is there a way to fix this?

      Here's how it renders in a browser (the way you'd think it should) link

      Here's how it looks in Dreamweaver (notice the missing gutters and how the center col is longer because the line-height isn't rendering right in the text) link

      and here's the actual html page link

        • 1. Re: CSS rendering in design window
          Newsgroup_User Community Member
          Remove the relative positioning from your columns, and the static
          positioning from the footer. How's it look now?

          You do not need to use relative positioning on the columns, and static is
          the default for a div anyhow.

          --
          Murray --- ICQ 71997575
          Adobe Community Expert
          (If you *MUST* email me, don't LAUGH when you do so!)
          ==================
          http://www.dreamweavermx-templates.com - Template Triage!
          http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
          http://www.dwfaq.com - DW FAQs, Tutorials & Resources
          http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
          ==================


          "jaymcdonald" <webforumsuser@macromedia.com> wrote in message
          news:etr1or$n94$1@forums.macromedia.com...
          >I am doing some simple CSS layout (nothing tricky at all), and noticing
          >that
          > there are significant differences between how the page looks in a browser,
          > and
          > how it looks in Dreamweaver. The layout is 3 floated columns with header
          > and
          > footer - a total of 5 DIVs. All are positioned 'relative', and there are
          > right,
          > left, and bottom margins of 10px on the center column to set the gutters
          > between columns and between the main column and the footer.
          >
          > Is there a way to fix this?
          >
          > Here's how it renders in a browser (the way you'd think it should)
          > http://www.hexatrope.com/forum_links/browser_view.gif
          >
          > Here's how it looks in Dreamweaver (notice the missing gutters and how the
          > center col is longer because the line-height isn't rendering right in the
          > text)
          > http://www.hexatrope.com/forum_links/dreamweaver_view.gif
          >
          > and here's the actual html page
          > http://www.hexatrope.com/forum_links/3col4.htm
          >
          >
          >


          • 2. CSS rendering in design window
            jaymcdonald Community Member
            Thanks for the feedback. However, I have the DIVs set to 'relative' so that I can then use absolute positioning on child items and have them be relative to the parent DIV. In case that's unclear, here is a breakdown of the technique: link

            Your comment actually caught an error on my part. The footer was supposed to be relative as well. I have fixed that, and while it still looks good in a browser, it breaks the Dreamweaver preview even further. (I reposted a new graphic to the original link)

            Why does Dreamweaver do this, and can I fix it while still using the settings I need for my design?
            • 3. Re: CSS rendering in design window
              Newsgroup_User Community Member
              > In case that's unclear, here is a breakdown of the technique

              Thanks. Am quite familiar with it. Why not make #container the relative
              positioned element and then all absolute elements will position relative to
              that? It's the use of relative with float that is whacking DW8's display.

              And unless you plan to have absolutely positioned elements in the footer, it
              doesn't need to be positioned at all. In fact, you probably don't need to
              use positioning anywhere - so why are you?

              --
              Murray --- ICQ 71997575
              Adobe Community Expert
              (If you *MUST* email me, don't LAUGH when you do so!)
              ==================
              http://www.dreamweavermx-templates.com - Template Triage!
              http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
              http://www.dwfaq.com - DW FAQs, Tutorials & Resources
              http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
              ==================


              "jaymcdonald" <webforumsuser@macromedia.com> wrote in message
              news:etrl6s$hn3$1@forums.macromedia.com...
              > Thanks for the feedback. However, I have the DIVs set to 'relative' so
              > that I
              > can then use absolute positioning on child items and have them be relative
              > to
              > the parent DIV.:
              > http://www.stopdesign.com/articles/absolute/
              >
              > Your comment actually caught an error on my part. The footer was supposed
              > to
              > be relative as well. I have fixed taht, and while it still looks good in a
              > browser, it breaks the Dreamweaver preview even further. (I reposted a new
              > graphic to the above link)
              >
              > Why does Dreamweaver do this, and can I fix it while still using the
              > settings
              > I need for my design?
              >


              • 4. Re: CSS rendering in design window
                jaymcdonald Community Member
                Well, first off - This is just the baseline template. I don't have anything else in there at the moment becaue a) the page is just getting started, and b) it made sense to strip down the code to just what was necessary to characterize the bug.

                Positioning off of #wrapper doesn't work if I want to make something sit just above the footer, or have something sit next to a particular paragraph in the main #content DIV.

                But most importantly, I'm not looking to change my code. It's valid CSS, and it is there to do things I want to be able to do. My question is about how to get Dreamweaver not to misinterpret it in the preview. It wouldn't make sense to me to limit the things I'm doing in a page design just to accomodate Dreamweaver's foibles. I just want to see if I can get Dreamweaver to "wise up" - is there a setting I can change somewhere in the application that affects how it displays, and make it display properly?
                • 5. Re: CSS rendering in design window
                  Newsgroup_User Community Member
                  No. Sorry.

                  --
                  Murray --- ICQ 71997575
                  Adobe Community Expert
                  (If you *MUST* email me, don't LAUGH when you do so!)
                  ==================
                  http://www.dreamweavermx-templates.com - Template Triage!
                  http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
                  http://www.dwfaq.com - DW FAQs, Tutorials & Resources
                  http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
                  ==================


                  "jaymcdonald" <webforumsuser@macromedia.com> wrote in message
                  news:etrnem$klh$1@forums.macromedia.com...
                  > Well, first off - This is just the baseline template. I don't have
                  > anything
                  > else in there at the moment becaue a) the page is just getting started,
                  > and b)
                  > it made sense to strip down the code to just what was necessary to
                  > characterize
                  > the bug.
                  >
                  > Positioning off of #wrapper doesn't work if I want to make something sit
                  > just
                  > above the footer, or have something sit next to a particular paragraph in
                  > the
                  > main #content DIV.
                  >
                  > But most importantly, I'm not looking to change my code. It's valid CSS,
                  > and
                  > it is there to do things I want to be able to do. My question is about how
                  > to
                  > get Dreamweaver not to misinterpret it in the preview. It wouldn't make
                  > sense
                  > to me to limit the things I'm doing in a page design just to accomodate
                  > Dreamweaver's foibles. I just want to see if I can get Dreamweaver to
                  > "wise up"
                  > - is there a setting I can change somewhere in the application that
                  > affects how
                  > it displays, and make it display properly?
                  >