3 Replies Latest reply: Nov 5, 2007 11:36 AM by Newsgroup_User RSS

    Gaps between divs

    BruceCSI2 Community Member
      I set up this demo page, http://www.mistchild.com/gruen/index.htm and there are gaps between divs when viewed in IE, but not Opera or FF. The weird thing is, they show up between the themepic div and the nav div, and between the content div and bottom div, but not between the nav div and the content div. I've set top margins of 0 for all divs in my stylesheet.
      Can anyone help me figure this one out?
      Thanks
        • 1. Re: Gaps between divs
          Newsgroup_User Community Member
          BruceCSI2 wrote:
          > I set up this demo page, http://www.mistchild.com/gruen/index.htm and there are
          > gaps between divs when viewed in IE, but not Opera or FF. The weird thing is,
          > they show up between the themepic div and the nav div, and between the content
          > div and bottom div, but not between the nav div and the content div. I've set
          > top margins of 0 for all divs in my stylesheet.
          > Can anyone help me figure this one out?
          > Thanks
          >
          >
          Before I take a closer look see if this gets rid of the gaps:

          img {
          display: block;
          }

          • 2. Re: Gaps between divs
            BruceCSI2 Community Member
            I'll have to try that later. I'm not at a computer where I can try that right now.
            • 3. Re: Gaps between divs
              Newsgroup_User Community Member
              "BruceCSI2" <webforumsuser@macromedia.com> wrote in message
              news:fgnj8t$pan$1@forums.macromedia.com...
              >I set up this demo page, http://www.mistchild.com/gruen/index.htm and there
              >are
              > gaps between divs when viewed in IE, but not Opera or FF. The weird thing
              > is,
              > they show up between the themepic div and the nav div, and between the
              > content
              > div and bottom div, but not between the nav div and the content div. I've
              > set
              > top margins of 0 for all divs in my stylesheet.
              > Can anyone help me figure this one out?

              Your construct is really "weird", try this:
              #nav,#content,#bottom{float:none}
              img{vertical-align:bottom}

              If that fixes your problem, then you can simply *remove* the float
              declarations from your sheet.
              As a side note, you should try to keep things as simple as possible. I'm
              sure you can safely remove "position:relative" from many rules. Also, there
              is no need to set a width on DIVs that are not floats (their natural
              behavior is to fill the the parent container).

              HTH,
              --
              Thierry
              Articles and Tutorials: http://www.TJKDesign.com/go/?0
              --
              http://www.divahtml.com/products/scripts_dreamweaver_extensions.php
              - divaGPS - Add "you are here" highlighting to virtually any menu
              - divaFAQ - Create FAQ pages that toggle (show/hide) the answers
              - divaPOP - Easy, clean, standards-compliant popup windows.