4 Replies Latest reply on Aug 7, 2007 1:07 PM by Newsgroup_User

    3 Column Hybrid leaves space on top in Firefox, but not IE

    VoteForTheSmartOne
      Hi-
      Just started working in CS3 Dreamweaver (have used previous versions). Starting a new site and the 3 Column Hybrid design it comes with is exactly what I want (well, close enough anyway). Unlike the other new layouts it leaves a space of about 10pixels at top of the page with the background page color when viewed in Firefox. Works great in IE 7. Anybody else have this problem? I haven't even started putting content in yet, so no links to show.
      Thanks,
      SL
        • 1. Re: 3 Column Hybrid leaves space on top in Firefox, but not IE
          Level 7
          Show us your page, please. The answer is in the code.

          --
          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
          ==================


          "VoteForTheSmartOne" <webforumsuser@macromedia.com> wrote in message
          news:f97rhp$tr$1@forums.macromedia.com...
          > Hi-
          > Just started working in CS3 Dreamweaver (have used previous versions).
          > Starting a new site and the 3 Column Hybrid design it comes with is
          > exactly
          > what I want (well, close enough anyway). Unlike the other new layouts it
          > leaves
          > a space of about 10pixels at top of the page with the background page
          > color
          > when viewed in Firefox. Works great in IE 7. Anybody else have this
          > problem? I
          > haven't even started putting content in yet, so no links to show.
          > Thanks,
          > SL
          >


          • 2. Re: 3 Column Hybrid leaves space on top in Firefox, but not IE
            destind4film
            You might try and go into the page properties and change the margins of the body to 0 or 1px and see if it helps. I think in one of my sites I have a CSS rule under "body" that defines the margins as 1px. I believe there is a default 5px margin used with all of the DW templates, but don't quote me on it. Defining the margins for the body using CSS would override this if that was the case.

            Your margins may also seem larger in different browsers since they all interpret CSS a little differently. FF and Safari may look just slightly off compared to IE and vice versa with regards to padding and margins. Has been a constant struggle for me in the past, with getting designs to look identical in all browsers.

            Hope this helps.
            • 3. Re: 3 Column Hybrid leaves space on top in Firefox, but not IE
              VoteForTheSmartOne Level 1
              Hi to Murray-
              I guess I wasn't clear. If you choose: File->New->HTML->3 Column Hybrid
              Nothing else added or changed. No preferences changed. It looks like http://www.slubdesign.com/projects/dump.html

              Then preview that file in FF and IE, for some reason in FF there is some margin space on top. I tried opening most of the other HTML layouts and none others had this problem. I went through the CSS but didn't see the problem. I'm sure it's there, since no other templates have this problem. The body CSS is set to 0. Page properties is set to 0. Tried changing and it only made it bigger (of course). Again, the space doesn't show up in IE at all, and only shows in FF under that one template.
              Thanks for the help.
              SL
              • 4. Re: 3 Column Hybrid leaves space on top in Firefox, but not IE
                Level 7
                Yes. What you are seeing is this -

                <body class="thrColHyb">

                <div id="container">
                <div id="sidebar1">
                <h3>sidebar1 Content</h3>

                Note that the first content on the page is an <h3> tag, which has an
                inherent top margin. IE collapses it. FF and all other browsers do not.

                If you add this rule to the page -

                #sidebar1 > h3, #sidebar2 > h3, #mainContent > h1 { margin-top:0; }

                it should take care of things.

                Thois says to make the first h3 and the first h1 in those divs have a top
                margin of zero.

                --
                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
                ==================


                "VoteForTheSmartOne" <webforumsuser@macromedia.com> wrote in message
                news:f9agft$6s1$1@forums.macromedia.com...
                > Hi to Murray-
                > I guess I wasn't clear. If you choose: File->New->HTML->3 Column Hybrid
                > Nothing else added or changed. No preferences changed. It looks like
                > http://www.slubdesign.com/projects/dump.html
                >
                > Then preview that file in FF and IE, for some reason in FF there is some
                > margin space on top. I tried opening most of the other HTML layouts and
                > none
                > others had this problem. I went through the CSS but didn't see the
                > problem. I'm
                > sure it's there, since no other templates have this problem. The body CSS
                > is
                > set to 0. Page properties is set to 0. Tried changing and it only made it
                > bigger (of course). Again, the space doesn't show up in IE at all, and
                > only
                > shows in FF under that one template.
                > Thanks for the help.
                > SL
                >