SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Zealot cyberian's Avatar
    Join Date
    Oct 2003
    Location
    MA
    Posts
    126
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Footer not staying on bottom in Firefox

    Can someone tell me why this is happening in Firefox?

    http://63.135.106.205/offer/

    The footer doesn't stay at the bottom like it does in IE.

    Thank you!

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Its because you've set a height on your #right which moz obeys. Change it to min-height and give ie its own height.
    Code:
    #right {
    position: relative;
    float:right;
    width:397px;
    border:0px dashed #000;
    margin-top: 45px;
    margin-bottom: 35px;
    padding: 0 20px 0 30px; 
    background: url(images/vert_dots.gif) repeat-y left top;
    min-height: 386px;
    }
    * html #right {width:444px;w\idth:397px;height:386px}
    (If you're worried about ie5 mac then you should give ie mac height:auto as it doesn't understand min-height and will respect height. However ie5 mac will probably need loads of stuff done to get it to display anyway.)

    Paul

  3. #3
    SitePoint Zealot cyberian's Avatar
    Join Date
    Oct 2003
    Location
    MA
    Posts
    126
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Many thanks for the quick response, Paul. I did exactly as you said, but Firefox still doesn't push that footer to the bottom when the content in #right is longer like in the above link.

    Any other ideas in your arsenal?

  4. #4
    SitePoint Zealot cyberian's Avatar
    Join Date
    Oct 2003
    Location
    MA
    Posts
    126
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ahhh. Your solution to this post - http://www.sitepoint.com/forums/showthread.php?t=188477 - finished it off for me.

    Thanks!

  5. #5
    SitePoint Zealot cyberian's Avatar
    Join Date
    Oct 2003
    Location
    MA
    Posts
    126
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Now it seems that in Firefox, the footer doesn't stop at the content when the window is resized vertically. In IE it seems to work ok - the footer stops below the content - so that it is always below everything.

    I think the reason lies in here somewhere:

    Code:
    /* CONTENT DIV
    ------------------------------*/
    
    #content {
    	position: relative;
    	border: 0px solid #000;
    	padding: 0;
    	margin-bottom: 125px;
    
    }
    
    
    
    #left {
    	position: relative;
    	float:left;
    	border-right: 0px dotted #999;
    	width:190px;
    	margin-top: 50px;
    }
    
    #right {
    	position: relative;
    	float:right;
    	width:397px;
    	border:0px dashed #000;
    	margin-top: 45px;
    	padding: 0 20px 0 30px;	
    	background: url(images/vert_dots.gif) repeat-y left top;
    	min-height: 466px;
    }
    
    * html #right {width:444px;w\idth:397px;height:466px;}
    
    /* FOOTER
    --------------------------------*/
    
    .clearer{
     height:1px;
     overflow:hidden;
     clear:both;
     margin-top:-1px;
    }
    		
    #footer {
    	position: absolute;
    	width: 650px;
    	background:#f5f5f5 url(images/horiz_bar.jpg) repeat-x top;
    	text-align:center;
    	bottom: 0;
    	clear:both;
    	margin: auto;
    	padding-top: 35px;
    	height: 70px !important;
        height: 110px;
        height/**/:/**/70px;
    }
    To try and fix it, I took out the bottom margins in the #right and #left. I replaced it with a bottom margin in #content. Makes more sense, but didn't solve the prob in Firefox.

    I also noticed that in Firefox, the footer stays at the bottom, but when the window is resized and then you scroll down, the footer stays where it is - and doesn't stay attached to the bottom. So it sort of sits in the middle of everything until you grab the bottom of the window and resize again. Wierd. But, of course, if the footer just stayed at the bottom like it is supposed to, this oddity wouldn't happen.

  6. #6
    SitePoint Zealot cyberian's Avatar
    Join Date
    Oct 2003
    Location
    MA
    Posts
    126
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Update. I tried switching the margin-top back to the #left and #right, which helped. Also, I added a <br style="clear:both;" /> above the #footer as that worked before in another layout for me.

    I ended up having to remove the .clearer class as the <br /> style above works better for both IE and Firefox. Now things seem to be stable. I think.

    Code:
    /* CONTENT DIV
    ------------------------------*/
    
    #content {
    	position: relative;
    	border: 0px solid #000;
    	padding: 0;
    }
    
    #left {
    	position: relative;
    	float:left;
    	border-right: 0px dotted #999;
    	width:190px;
    	margin-top: 50px;
    	margin-bottom: 125px;
    	
    }
    
    #right {
    	position: relative;
    	float:right;
    	width:397px;
    	border:0px dashed #000;
    	margin-top: 45px;
    	
    	padding: 0 20px 0 30px;	
    	background: url(images/vert_dots.gif) repeat-y left top;
    	min-height: 466px;
    	margin-bottom: 125px;
    }
    
    * html #right {width:444px;w\idth:397px;height:466px;}
    
    #right ul {
    	list-style-type: none;
    	margin: 0;
    	padding: 0;
    }
    
    #cosmos {
    	background: url(images/cosmos.jpg) no-repeat;
    	height: 86px;
    	margin: 10px 0 5px 0;
    }

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Let me know if you want me to double check it for you


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
  •