1 Reply Latest reply on Feb 20, 2010 12:13 PM by Nancy OShea

    Can someone help wtih positiong elements in IE?

    kelsey720

      I can get the elements to position properly in firefox, and opera but not IE. I have the header, container and footer separate from one another. I would put the header in the container but I need an image in the header of width 1200px that fills the entire header and an image of repeating background on the body to fill the rest of the header. My problem is getting the footer to stay properly at the bottom by using 100% height for the container. Negative margin on the container works for the footer with a div of same height as the footer to push it back down. However, negative margin on the top of the container of the same height as the header works in all other browsers but IE. Please help!

       

      <div class="header">

        <div class="headercontainer">

          <div class="headersubcontainer">

          </div>

        </div>

      </div>

      <div class="container">

      <--All content -->

        <div class="push">

        </div>

      </div>

      <div class="footer">

        <div class="footercontainer">

        </div>

      </div>

       

      .container {
          padding: 0px;
          width: 980px;
          min-height: 100%;
          height: auto !important;
          height: 100%;
          margin: -176px auto -41px;
          font-family: Arial, Helvetica, sans-serif;
          font-size: 12px;
      }

      .header {

          margin: 0px;
          text-align: center;
          background-image: url(/images/universal/Small_BG_No_Dividers.png);
          background-position: left top;
          background-repeat: no-repeat;
          padding: 0px;
      }

      .headercontainer {
          background-image:url(/images/header1.png);
          height: 156px;
          width: 1200px;
          background-position: center top;
          background-repeat: no-repeat;
      }
      .headersubcontainer {
          font-size: 12px;
          font-family: Arial, Helvetica, sans-serif;
          background-repeat: no-repeat;
          width: 980px;
          margin: auto;
          height: 156px;
      }

      .push {
          padding: 0px;
          height: 41px;
          width: auto;
          clear: both;
      }
      .footer {
          margin-top: 20px;
          padding: 0px;
          height: 41px;
          clear: both;
          text-align: center;
          color: #FFF;
          background-image: url(/images/Footer_Pixel.png);
          background-repeat: repeat-x;
          background-position: bottom;
          font-size: 12px;
          font-family: Arial, Helvetica, sans-serif;
      }
      * html .footer {/*only ie gets this style*/
          \height:41px;/* for ie5 */
          he\ight:41px;/* for ie6 */
      }
      .footercontainer {
          width: 980px;
          margin: auto;
          height: 35px;
      }

       

       

      Kelsey