9 Replies Latest reply on Mar 1, 2010 12:39 PM by Nancy OShea

    CSS gap below header

    mojogar Level 1

      I have a header on a template that is showing a gap between it and the divs in the content below it.  I have borders in different colors and you can see it at mojogar.com.  The header has a blue line that represents a bottom border line in its CSS.

       

      .thrColHybHdr #header {
      background-color: #C9F76F;
      margin: 0px;
      padding: 0;
      border-bottom-width: thick;
      border-bottom-style: solid;
      border-bottom-color: #30F;
      }

       

      Right below that is a black line that is the border top of the container div for the middle section.  They line up fine.

       

      .thrColHybHdr #mainContent {
      margin-top: 0;
      margin-right: 13em;
      margin-bottom: 0;
      margin-left: 13em;
      padding-top: 0;
      padding-right: 1em;
      padding-bottom: 0;
      padding-left: 1em;
      text-align: center;
      position: relative;
      border-top-width: thick;
      border-top-style: solid;
      border-top-color: #000;
      }

       

      But, my div inside that "mainContent" div leaves a gap (as do the side ones which I am not posting the CSS but you can see the gaps on the sides at the site).  Here is the CSS for that div inside the middle section with the yellow top border.

       

      .defFullTop {
      position: relative;
      width: 100%;
      border-bottom-width: medium;
      border-bottom-style: solid;
      border-bottom-color: #ff4900;
      border-top-width: thick;
      border-top-style: solid;
      border-top-color: #FF0;
      border-right-width: thick;
      border-left-width: thick;
      border-right-style: solid;
      border-left-style: solid;
      border-right-color: #C03;
      border-left-color: #C00;
      }

       

      Thanks!