开发者

IE6 footer layout breaking

can someone spot why this layout is breaking in IE6? have tried various options but still the same. please see screen shots for exact problem. thanks

Screen Shots

http://img232.imageshack.us/i/footerie6.png/

http://img546.imageshack.us/i/footerie7.png/

HTML

<div id="footer">
      <div class="footerLogos">

        <img src="images/psw.png" alt="Footer Divider" width="164" height="50" />
        <br /><br /><br />
        <div class="footerLogosText">
          Pocket Size Websites
        </div>

      </div>
      <div class="containerFooterBlock">
      <div class="footerTextabout">
            Quick Links<br />

              <br />
        <div class="footerTextContent">
          <ul>

            <li><a href="#">Unique Website Design & Development</a></li>
            <li>E-Commerce Shopping Carts</li>
            <li>Content Management Systems (CMS)</li>
            <li>Search Engine Optimization (SEO)</li>
            <li>Logo &amp; Brochure Design</li>
          </ul>

        </div>
            <img src="images/footer-div.png" alt="Footer Divider" width="2" height="256" />
      </div>


      <div class="footerTextabout">
            Resources<br />

              <br />
        <div class="footerTextContent">
              <ul>
             <li>Unique Website Design & Development</li>


            <li>E-Commerce Shopping Carts</li>


            <li>Content Management Systems (CMS)</li>


            <li>Search Engine Optimization (SEO)</li>


            <li>Web Hosting</li>


            <li>Logo &amp; Brochure Design</li>

          </ul>

          </div>

                  <img src="images/footer-div.png" alt="Footer Divider" width="2" height="256" />
      </div>
      <div class="footerTextabout">
            Blogs<br />

              <br />
          <div class="footerTextContent">
              <ul>
             <li>Unique Website Design & Development</li>


            <li>E-Commerce Shopping Carts</li>


            <li>Content Management Systems (CMS)</li>


            <li>Search Engine Optimization (SEO)</li>


            <li>Web Hosting</li>


            <li>Logo &amp; Brochure Design</li>

          </ul>

          </div>
                <!--<img src="images/footer-div.png" alt="Footer Divider" width="2" height="256" />-->

 开发者_Go百科     </div>
      </div>
      <div id="footerText">
        &copy; some domain 2011
      </div>

  </div>

CSS

#footer
    {

            width: 999px;
            height:500px;
            margin: 0 auto;
            background-image: url(../images/footer-bg.png);
            background-position: center center;
            background-repeat: repeat-x;

    }

#footerText
    {

            text-align: center;
            padding: 38px 0 0 0;
            font: 11px Tahoma, Verdana, Arial, Helvetica, sans-serif;
            color: #000;

    }

.containerFooterBlock
    {

            float:left;
            width: 999px;
            padding: 3px 0 0 0;
            clear:both;

    }

.footerTextabout
    {

            width:280px;
            height:300px;
            float:left;
            font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
            font-size: 20px;
            color: #fff;
            font-weight: normal;
            padding: 20px 0 0 36px;
            clear:none;

    }

.footerTextContent
    {

            width:250px;
            height:400px;
            float:left;
            font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
            font-size: 12px;
            color: #fff;
            font-weight: normal;
            padding: 10px 0 0 10px;
            line-height: 30px;
            text-align:justify;

    }

.footerTextContent li
    {
            padding: 0 0 0 25px;
            list-style-type: none;
            background-image:url(../images/tick.png);
            background-position: left 7px;
            background-repeat: no-repeat



    }

.footerTextabout img
    {

            float:left;
            padding:10px 0 0 18px;

    }

.footerLogos
    {

            width:250px;
            float:left;
            font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
            font-size: 16px;
            color: #666;
            font-weight: normal;
            padding: 15px 0 0 24px;


    }

.footerLogosText
    {

            width:250px;
            float:left;
            font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
            font-size: 11px;
            color: #999;
            font-weight: normal;
            padding: 2px 0 0 32px;

    }

.footerLogos img
    {

            float:left;
            padding:5px 0 5px 0;
            border: 1px solid black;

    }
            <div class="footerTextContent">
              <ul>

                <li><a href="#">Unique Website Design & Development</a></li>
                <li>E-Commerce Shopping Carts</li>
                <li>Content Management Systems (CMS)</li>
                <li>Search Engine Optimization (SEO)</li>
                <li>Logo &amp; Brochure Design</li>
              </ul>

            </div>
                <img src="images/footer-div.png" alt="Footer Divider" width="2" height="256" />
          </div>


          <div class="footerTextabout">
                Resources<br />

                  <br />
            <div class="footerTextContent">
                  <ul>
                 <li>Unique Website Design & Development</li>


                <li>E-Commerce Shopping Carts</li>


                <li>Content Management Systems (CMS)</li>


                <li>Search Engine Optimization (SEO)</li>


                <li>Web Hosting</li>


                <li>Logo &amp; Brochure Design</li>

              </ul>

              </div>

                      <img src="images/footer-div.png" alt="Footer Divider" width="2" height="256" />
          </div>
          <div class="footerTextabout">
                Blogs<br />

                  <br />
              <div class="footerTextContent">
                  <ul>
                 <li>Unique Website Design & Development</li>


                <li>E-Commerce Shopping Carts</li>


                <li>Content Management Systems (CMS)</li>


                <li>Search Engine Optimization (SEO)</li>


                <li>Web Hosting</li>


                <li>Logo &amp; Brochure Design</li>

              </ul>

              </div>
                    <!--<img src="images/footer-div.png" alt="Footer Divider" width="2" height="256" />-->

          </div>
          </div>
          <div id="footerText">
            &copy; some domain 2011
          </div>

      </div>


.footerLogos {
    width:999px;
}

I don't see why that box should be so small since everything else is anyway displayed on its bottom.

Maybe with this you don't need the float anymore.


Try adding clear:both to the LAST element in the footer: #footerText


well assuming you have the two closing divs in your html structure, my guess is that it is a float problem. put this before the closing div for #footer and you should be alright:

<div style='clear:both'></div>

also add

#footer{
    clear:both;
}


Add this in your #footer css:

#footer{
    clear:both;
}
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜