can't get footer div to behave in IE!!

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • stevenews
    New Member
    • Jan 2007
    • 1
    #1

    can't get footer div to behave in IE!!

    Hi All, I have a footer div that I can't make behave!! It has the same css as the div above it, but it won't align...I've included the pertinent css: a container that holds the entire layout, the div above the footer for reference, and the footer itself. I have the pertinent html below the css. BTW, this is only breaking in IE!! (comments added only for this post)

    Thanks!!!
    /* THE BODY FOR LAYOUT CENTERING */

    body {
    text-align:center;
    background-image: url('graphics/background.gif' );
    background-repeat: repeat-x;
    }

    /*THE OVERALL CONTAINER */
    #container {
    width:765px;
    margin:0px auto;
    text-align:left; /* to counter the centering from above */
    padding:5px;
    border-top: 1px solid #c2c1ba;
    border-bottom: 1px solid #c2c1ba;
    background-image: url('graphics/containerback2. gif');
    background-repeat: repeat-y;
    }
    /*THE DIV ABOVE THE FOOTER (AND ITS TWO INNER DIVS)*/
    #calsvt {
    width:763px;
    margin:0px;
    background-color: #fff;
    padding-top:5px;
    padding-bottom: 5px;
    border:1px dashed #333;
    }

    #calsvtleft {
    width: 350px;
    padding: 0;
    margin: 10px;
    float:left;
    border:1px dashed #000;
    }

    #calsvtright {
    width: 350px;
    padding: 0;
    margin: 10px;
    float:right;
    border:1px dashed #000;

    }
    /*THE FOOTER DIV THAT WON'T ALIGN: SHOWING ABOUT 2px SHORT ON THE RIGHT SIDE!*/

    #footer {
    width:763px;
    margin:0px;
    background-color: #660000;
    padding-top:5px;
    border:1px dashed #333;
    }

    #footerleft {
    width: 350px;
    padding: 0;
    margin: 10px;
    float:left;
    text-align:left;
    border:1px dashed #000;
    }

    #footerright {
    width: 350px;
    padding: 0;
    margin: 10px;
    float:right;
    text-align:right;
    border:1px dashed #000;
    }


    THE HTML:

    <body>
    <div id="container" >

    <div id="calsvt">

    <div id="calsvtleft" >
    //STUFF HERE
    </div> <!-- for calsvtleft -->

    <div id="calsvtright ">
    //STUFF HERE
    </div> <!-- for calsvtright -->

    <div style="clear: both;"></div>
    </div> <!-- for calsvt -->


    <div id="footer">

    <div id="footerleft" >
    //STUFF HERE
    </div>

    <div id="footerright ">
    //STUFF HERE
    </div>

    <div style="clear: both;"></div>

    </div> <!-- for footer -->


    <div style="clear: both;"></div>
    </div> <!-- for container div -->

    </body>
    </html>
    Tags: None
    • Motoma
      Recognized Expert Specialist
      • Jan 2007
      • 3236
      #2
      Originally posted by stevenews
      Hi All, I have a footer div that I can't make behave!! It has the same css as the div above it, but it won't align...I've included the pertinent css: a container that holds the entire layout, the div above the footer for reference, and the footer itself. I have the pertinent html below the css. BTW, this is only breaking in IE!! (comments added only for this post)

      Thanks!!!
      /* THE BODY FOR LAYOUT CENTERING */

      body {
      text-align:center;
      background-image: url('graphics/background.gif' );
      background-repeat: repeat-x;
      }

      /*THE OVERALL CONTAINER */
      #container {
      width:765px;
      margin:0px auto;
      text-align:left; /* to counter the centering from above */
      padding:5px;
      border-top: 1px solid #c2c1ba;
      border-bottom: 1px solid #c2c1ba;
      background-image: url('graphics/containerback2. gif');
      background-repeat: repeat-y;
      }
      /*THE DIV ABOVE THE FOOTER (AND ITS TWO INNER DIVS)*/
      #calsvt {
      width:763px;
      margin:0px;
      background-color: #fff;
      padding-top:5px;
      padding-bottom: 5px;
      border:1px dashed #333;
      }

      #calsvtleft {
      width: 350px;
      padding: 0;
      margin: 10px;
      float:left;
      border:1px dashed #000;
      }

      #calsvtright {
      width: 350px;
      padding: 0;
      margin: 10px;
      float:right;
      border:1px dashed #000;

      }
      /*THE FOOTER DIV THAT WON'T ALIGN: SHOWING ABOUT 2px SHORT ON THE RIGHT SIDE!*/

      #footer {
      width:763px;
      margin:0px;
      background-color: #660000;
      padding-top:5px;
      border:1px dashed #333;
      }

      #footerleft {
      width: 350px;
      padding: 0;
      margin: 10px;
      float:left;
      text-align:left;
      border:1px dashed #000;
      }

      #footerright {
      width: 350px;
      padding: 0;
      margin: 10px;
      float:right;
      text-align:right;
      border:1px dashed #000;
      }


      THE HTML:

      <body>
      <div id="container" >

      <div id="calsvt">

      <div id="calsvtleft" >
      //STUFF HERE
      </div> <!-- for calsvtleft -->

      <div id="calsvtright ">
      //STUFF HERE
      </div> <!-- for calsvtright -->

      <div style="clear: both;"></div>
      </div> <!-- for calsvt -->


      <div id="footer">

      <div id="footerleft" >
      //STUFF HERE
      </div>

      <div id="footerright ">
      //STUFF HERE
      </div>

      <div style="clear: both;"></div>

      </div> <!-- for footer -->


      <div style="clear: both;"></div>
      </div> <!-- for container div -->

      </body>
      </html>
      I'm not sure if this is the case or not, but I ran into a circumstance where IE was rendering whitespace in between cells in a table. The solution for me was to remove the lines between the elements that were not aligning correctly.
      Just a shot in the dark.

        Comment

        • drhowarddrfine
          Recognized Expert Expert
          • Sep 2006
          • 7434
          #3
          Maybe I'm missing something but they look the same to me in FF, IE6 and IE7.

            Comment

            Previous template Next
            Working...