SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2004
    Location
    Estonia
    Posts
    75
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    footer problem with IE

    The page
    Content text goes behind footer in IE and I can not find the solution for that.

    The css concerning this problem should be:
    Code:
    #nonFooter
    {
    position: relative;
    min-height: 100%;
    width: 1024px;
    margin: auto;
    background: transparent url(../images/pilv2.jpg) top left no-repeat;
    }
    
    * html #nonFooter
    {
    height: 100%;
    }
      #footer {
      background: #00a0c6;
      height: 95px;
      color: #fff;
      position: relative;
      margin-top: -100px;
      clear: both;
      text-align:left;
      font-size: 20px;
      font-weight: bold;
      font-family: Arial, sans-serif;
      padding-top:5px;
     }
    I tired:
    Code:
    * html #footer
    {
    margin-top: 0;
    }
    It worked for pages with long content, but when content wasn't so long the footer disappeared under the browser window.

    Can someone help please?

  2. #2
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  3. #3
    SitePoint Enthusiast
    Join Date
    Jul 2004
    Location
    Estonia
    Posts
    75
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm using the footerStickAlt and I don't know if I can mix these two methods.
    I have tried several ways, but IE still does not work as expected.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,821
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    Yes that method was uncannily similar to mine but appeared a few years layer

    Because the footer is being dragged back into view by 100px, that means it will overlap the bottom of the outer div by 100px and cover any content there.

    You need to create an element to soak up that space so that it protects the content.

    e.g.
    Code:
            </div>
        </div>
    <div style="clear:both;height:100px"></div>
    </div>
    <!--right-->
    <div id="footer">
    Inline styles for example only.

    This is explained in detail in the faq

  5. #5
    SitePoint Enthusiast
    Join Date
    Jul 2004
    Location
    Estonia
    Posts
    75
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You're great Paul O'B
    Thank you very much.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •