www.webdeveloper.com
Results 1 to 9 of 9

Thread: IE 7 and FF Issue: Sticky footer and 100% div

  1. #1
    Join Date
    Dec 2002
    Posts
    13

    Unhappy IE 7 and FF Issue: Sticky footer and 100% div

    Hi,
    http://multimediaelements.com/sinaih...camp_reim.html

    The right div wont extend past a certain point in IE 7 and FF - works ok in IE6.
    The .right div wont extend down with the white background past the page view. Works fine on short pages, but not on longer ones...


    CSS
    =====================================================================*/

    html {
    overflow-x: auto;
    height:100%;
    margin:0;
    padding:0}
    /* fixes MSIE scrollbar bug DO NOT REMOVE, has no effect in Mozilla, or Opera */

    body
    {
    background: url(../images/bg.jpg) no-repeat scroll 50% 0pt;
    background-color:#0c125a;
    text-align: center;
    line-height: 1.6em;
    height:100%;
    margin:0;
    padding:0;
    }


    #wrapper {
    margin: 0 auto -21px;
    text-align: left;
    min-height: 100%;
    height: auto !important;
    height: 100%;
    /* re_aligns text to left second part of two part MSIE centering workaround */
    width: 959px; /* Total width */
    background-color:#fff;
    }


    .left {
    width:210px;
    height:auto;
    float:left;
    margin-top:20px;
    }

    .main {

    background-color:#FFFFFF;
    height:100% auto;
    }


    /*Begin Right Menu --------------------------- */

    .right {
    float: left;
    width: 250px;
    margin:17px 5px 0 5px;
    background-color: #FFFFFF;

    }

    /*-End RightMenu --------------------------- */


    /*- Footer --------------------------- */
    # .footer, .push {
    height: 16px;
    }
    #footer {
    clear: both;
    text-align: center;
    margin: 0 auto -21px;
    background-color: #000066;
    line-height:21px;
    width:970px;
    height:21px;
    }
    #footer p {
    display:inline; /* gets the list items showing horizontally */
    letter-spacing:0.01em;
    font: 12px Arial;
    color:#fff;

    }
    #footer li.first {
    border-left:0; /* no bar required before first item */
    }
    #footer li.last {
    border-right:0; /* no bar required after last item */
    }
    #footer li.none {
    border-right:0; /* no bar required after last item */
    border-left:0; /* no bar required before first item */
    }
    #footer li a {
    text-decoration:none; /* removes the underline from links */
    }
    #footer li a:hover {
    text-decoration:underline; /* adds the underline back on mouseover */
    }

    /*- End footer --------------------------- */

  2. #2
    Join Date
    Mar 2006
    Location
    Newcastle NSW Australia
    Posts
    4,033
    This is due to the #wrapper div not clearing the floated content. Setting the overflow property fixes that, but cannot be applied in IE6 due to the set height. Rather than that silly !important hack, targeting IE6 with the * html hack makes this easier :
    Code:
    #wrapper {
    	margin: 0 auto -21px;
    	text-align: left;
    	min-height: 100%;
    	width: 959px; 	/* Total width */
    	background-color:#fff;
    	overflow: hidden;
    }
    * html #wrapper {
    	overflow: visible;
    	height: 100%;
    }

  3. #3
    Join Date
    Dec 2002
    Posts
    13
    Centauri, You rock.
    It is working fabulous in IE 6 & 7, but in FF, it now covers my footer.

    http://multimediaelements.com/sinaihollywood/index.html

    Any ideas?

  4. #4
    Join Date
    Mar 2006
    Location
    Newcastle NSW Australia
    Posts
    4,033
    A relative position on the footer will bring that back on top. However, I noticed another problem in that the right column overlaps. Closer examination of your code reveals a ".push" div, which is used to make sure that none of the content is too close to the bottom to be obscured by the footer. However, besides being the wrong height, it is also in the wrong place in the html as there is an extra </div> tag before the .push div that needs to be removed :
    Code:
      </noscript></div>
      </div>
    
      <div class="push"></div>
    </div>
    <div id="footer">
    The .push div needs to be below the floats, so it needs the clear:both applied. As the #wrapper will now surround the .push div, the overflow on it is no longer required. The negative bottom margin is also not needed now - a negative top margin on the footer brings it up. The clear on the footer is not needed either :
    Code:
    #wrapper {
    	margin: 0 auto;
    	text-align: left;
    	min-height: 100%;
    	width: 959px; 	/* Total width */
    	background-color:#fff;
    }
    
    .push {
    	height: 25px;
    	clear: both;
     }
    
    #footer {
    	text-align: center;
    	margin: -21px auto 0;
    	background-color: #000066;
    	line-height:21px;
    	width:970px;
    	height:21px;
    	position: relative;
    }

  5. #5
    Join Date
    Dec 2002
    Posts
    13

    Thumbs up

    Fixed!

    I did everything you advised, but I ended up having to leave the overflow in the #wrapper, because when I removed it, in FF it moved the contents of the footer under the right div and the footer was stuck - not moving to the bottom of the page.

    Thank you so much for taking the time to help!!

    Have a great day,
    Deb

  6. #6
    Join Date
    Mar 2006
    Location
    Newcastle NSW Australia
    Posts
    4,033
    This means you didn't remove the extra </div> tag that is above .push.

  7. #7
    Join Date
    Dec 2002
    Posts
    13
    LOL...
    I did remove an extra </div>, but I saw it before the .push. The one immediately after was the closing div for the wrapper.
    Was I wrong?
    Please take a look at the updated code:http://multimediaelements.com/sinaihollywood/index.html

  8. #8
    Join Date
    Mar 2006
    Location
    Newcastle NSW Australia
    Posts
    4,033
    Divs are ok - you have an extraneous hash symbol before the .push css which causes the browser to ignore the rule. Remove the highlighted hash :
    Code:
    # .push {
       height: 25px;
    	clear: both;
     }

  9. #9
    Join Date
    Dec 2002
    Posts
    13
    You are good! I wish I had that detailed eye..
    Thanks again. My code is much cleaner and logical now. Besides getting it to do what I needed it to do!
    Thanks so much.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles