5 Replies Latest reply on Sep 28, 2008 12:47 AM by miner2049er

    Problem with predesigned CSS layout in Dreamweaver CS3

    miner2049er
      In Dreamweaver CS3, with the predesigned CSS layouts that are offered when creating a New Document, I'm a having a problem with one of them, in particular the "2 column fixed, left sidebar, header and footer" layout.

      What is is happening, is that on IE6 and IE7 there is always a small 10 pixel or so gap between the header and the sidebar, no matter what I seem to try. I believe I have zeroed out the margin and padding everywhere.

      It displays fine (with NO gap between header and sidebar) in both Firefox, and in the Dreamweaver design view.

      I'm using Windows XP and Vista.

      I've even looked for a solution extensively using search engines, but with no luck.

      Here is a screengrab of what is happening:

      Screen Grab

      Can anybody assist?

      Thanks in advance for any answers.

        • 1. Re: Problem with predesigned CSS layout in Dreamweaver CS3
          Level 7
          Hello,

          You changed the padding in the CSS rules, but didn't change the padding in
          the IE conditional comment here:

          <!--[if IE]>
          <style type="text/css">
          /* place css fixes for all versions of IE in this conditional comment */
          .twoColFixLtHdr #sidebar1 { padding-top: 30px; }


          This says, "For IE, give the sidebar 30px of top padding."
          Your screenshots look like it's doing just that.

          Take care,
          Tim




          "miner2049er" <webforumsuser@macromedia.com> wrote in message
          news:gb51vn$8n0$1@forums.macromedia.com...
          > In Dreamweaver CS3, with the predesigned CSS layouts that are offered when
          > creating a New Document, I'm a having a problem with one of them, in
          > particular
          > the "2 column fixed, left sidebar, header and footer" layout.
          >
          > What is is happening, is that on IE6 and IE7 there is always a small 10
          > pixel
          > or so gap between the header and the sidebar, no matter what I seem to
          > try. I
          > believe I have zeroed out the margin and padding everywhere.
          >
          > It displays fine (with NO gap between header and sidebar) in both Firefox,
          > and
          > in the DW-CS3 design view.
          >
          > I'm using Windows XP and Vista.
          >
          > I've even looked for a solution extensively with search engines, but with
          > no
          > luck.
          >
          > Here is a screengrab of what is happening:
          >
          > http://www.simobile.com/css-problem.jpg
          >
          > Can anybody assist? Thanks in advance for any answers.
          >
          > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
          > " http://www.w3.org/TR/html4/loose.dtd">
          > <html>
          > <head>
          > <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
          > <title>Untitled Document</title>
          > <style type="text/css">
          > <!--
          >
          > html, body, address, blockquote, div, dl, form, h1, h2, h3, h4, h5, h6,
          > ol, p,
          > pre, table, ul,
          > dd, dt, li, tbody, td, tfoot, th, thead, tr, button, del, ins, map,
          > object,
          > a, abbr, acronym, b, bdo, big, br, cite, code, dfn, em, i, img, kbd, q,
          > samp,
          > small, span,
          > strong, sub, sup, tt, var, legend, fieldset {
          > margin: 0;
          > padding: 0;
          > }
          > img, fieldset {
          > border: 0;
          > }
          >
          >
          >
          >
          >
          >
          >
          >
          >
          >
          > body {
          > font: 100% Verdana, Arial, Helvetica, sans-serif;
          > background: #666666;
          > margin: 0; /* it's good practice to zero the margin and padding of the
          > body
          > element to account for differing browser defaults */
          > padding: 0;
          > text-align: center; /* this centers the container in IE 5* browsers. The
          > text
          > is then set to the left aligned default in the #container selector */
          > color: #000000;
          > }
          > .twoColFixLtHdr #container {
          > width: 780px; /* using 20px less than a full 800px width allows for
          > browser
          > chrome and avoids a horizontal scroll bar */
          > background: #FFFFFF;
          > margin: 0 auto; /* the auto margins (in conjunction with a width) center
          > the
          > page */
          > border: 1px solid #000000;
          > text-align: left; /* this overrides the text-align: center on the body
          > element. */
          > }
          > .twoColFixLtHdr #header {
          > background: #DDDDDD;
          > padding: 0 10px 0 20px; /* this padding matches the left alignment of
          > the
          > elements in the divs that appear beneath it. If an image is used in the
          > #header
          > instead of text, you may want to remove the padding. */
          > }
          > .twoColFixLtHdr #header h1 {
          > margin: 0; /* zeroing the margin of the last element in the #header div
          > will
          > avoid margin collapse - an unexplainable space between divs. If the div
          > has a
          > border around it, this is not necessary as that also avoids the margin
          > collapse
          > */
          > padding: 10px 0; /* using padding instead of margin will allow you to
          > keep
          > the element away from the edges of the div */
          > }
          > .twoColFixLtHdr #sidebar1 {
          > float: left; /* since this element is floated, a width must be given */
          > width: 200px; /* the actual width of this div, in standards-compliant
          > browsers, or standards mode in Internet Explorer will include the padding
          > and
          > border in addition to the width */
          > background: #EBEBEB; /* the background color will be displayed for the
          > length
          > of the content in the column, but no further */
          > padding: 0px 0px 0px 0px;
          > }
          > .twoColFixLtHdr #mainContent {
          > margin: 0 0 0 250px; /* the left margin on this div element creates the
          > column down the left side of the page - no matter how much content the
          > sidebar1
          > div contains, the column space will remain. You can remove this margin if
          > you
          > want the #mainContent div's text to fill the #sidebar1 space when the
          > content
          > in #sidebar1 ends. */
          > padding: 0 20px; /* remember that padding is the space inside the div box
          > and
          > margin is the space outside the div box */
          > }
          > .twoColFixLtHdr #footer {
          > padding: 0 10px 0 20px; /* this padding matches the left alignment of the
          > elements in the divs that appear above it. */
          > background:#DDDDDD;
          > }
          > .twoColFixLtHdr #footer p {
          > margin: 0; /* zeroing the margins of the first element in the footer will
          > avoid the possibility of margin collapse - a space between divs */
          > padding: 10px 0; /* padding on this element will create space, just as
          > the
          > the margin would have, without the margin collapse issue */
          > }
          > .fltrt { /* this class can be used to float an element right in your page.
          > The
          > floated element must precede the element it should be next to on the page.
          > */
          > float: right;
          > margin-left: 8px;
          > }
          > .fltlft { /* this class can be used to float an element left in your page
          > */
          > float: left;
          > margin-right: 8px;
          > }
          > .clearfloat { /* this class should be placed on a div or break element and
          > should be the final element before the close of a container that should
          > fully
          > contain a float */
          > clear:both;
          > height:0;
          > font-size: 1px;
          > line-height: 0px;
          > }
          > -->
          > </style><!--[if IE 5]>
          > <style type="text/css">
          > /* place css box model fixes for IE 5* in this conditional comment */
          > .twoColFixLtHdr #sidebar1 { width: 230px; }
          > </style>
          > <![endif]--><!--[if IE]>
          > <style type="text/css">
          > /* place css fixes for all versions of IE in this conditional comment */
          > .twoColFixLtHdr #sidebar1 { padding-top: 30px; }
          > .twoColFixLtHdr #mainContent { zoom: 1; }
          > /* the above proprietary zoom property gives IE the hasLayout it needs to
          > avoid several bugs */
          > </style>
          > <![endif]--></head>
          >
          > <body class="twoColFixLtHdr">
          >
          > <div id="container">
          > <div id="header">
          > <h1>Header</h1>
          > <!-- end #header --></div>
          > <div id="sidebar1">
          > The background color on this div will only show for the length of the
          > content. If you'd like a dividing line instead, place a border on the left
          > side
          > of the #mainContent div if it will always contain more content.
          > <p>Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu,
          > pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi,
          > eleifend
          > sollicitudin, molestie id, varius et, nibh. Donec nec libero.</p>
          > <!-- end #sidebar1 --></div>
          > <div id="mainContent">
          > <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent
          > aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at
          > nonummy
          > quam ante ac quam. Maecenas urna purus, fermentum id, molestie in,
          > commodo
          > porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis
          > ligula.
          > Phasellus tristique purus a augue condimentum adipiscing. Aenean
          > sagittis.
          > Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.
          > Donec et
          > ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce varius urna
          > id
          > quam. Sed neque mi, varius eget, tincidunt nec, suscipit id, libero. In
          > eget
          > purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat feugiat.
          > Integer
          > turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce
          > metus
          > mi, eleifend sollicitudin, molestie id, varius et, nibh. Donec nec
          > libero.</p>
          > <h2>H2 level heading </h2>
          > <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent
          > aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at
          > nonummy
          > quam ante ac quam. Maecenas urna purus, fermentum id, molestie in,
          > commodo
          > porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis
          > ligula.
          > Phasellus tristique purus a augue condimentum adipiscing. Aenean
          > sagittis.
          > Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>
          > <!-- end #mainContent --></div>
          > <!-- This clearing element should immediately follow the #mainContent div
          > in
          > order to force the #container div to contain all child floats --><br
          > class="clearfloat" />
          > <div id="footer">
          > <p>Footer</p>
          > <!-- end #footer --></div>
          > <!-- end #container --></div>
          > </body>
          > </html>
          >


          • 2. Problem with predesigned CSS layout in Dreamweaver CS3
            miner2049er Level 1
            Thanks Tim, that indeed was it.

            I must have skipped over IE conditional code as it was greyed out.

            Now when I generate a fresh page from New Document (with no code modification), and view it in IE6/7 there is NO space between the Main Content and the header, but there is some white space in Firefox.

            Is this a similar situation to the previous occurence, requiring conditional IE code?

            I would have though the bare pages generated from DW-CS3 would be identical in IE and FF, but they are not.

            Does anybody have any insights? Thanks in advance!
            • 3. Re: Problem with predesigned CSS layout in Dreamweaver CS3
              miner2049er Level 1
              Here is a new screen grab to illustrate the problem:

              New Screen Grab

              If anyone knows why the gap between header and main content is different on IE and FF, please advise!
              • 4. Re: Problem with predesigned CSS layout in Dreamweaver CS3
                Level 7
                Hello,

                The answer is in the code.
                My guess is the H1 tag margin isn't zeroed out so Firefox is using it's
                default, but I'd need to see the code to know for sure.

                Take care,
                Tim


                "miner2049er" <webforumsuser@macromedia.com> wrote in message
                news:gbmrsk$a8o$1@forums.macromedia.com...
                > Here is a new screen grab to illustrate the problem:
                >
                > http://www.simobile.com/browser-differences.jpg
                >
                > If anyone knows why the gap between header and main content is different
                > on IE
                > and FF, please advise!
                >


                • 5. Re: Problem with predesigned CSS layout in Dreamweaver CS3
                  miner2049er Level 1
                  Thanks again Tim, that was it. I zeroed out the h1 margin, and they now render the same.

                  h1
                  {
                  margin:0;
                  }