Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 13
  1. #1
    Senior Member Maverick's Avatar
    Join Date
    Sep 2003
    Location
    Hoboken, NJ
    Posts
    351
    Member #
    3253
    CSS Footer Bug - Still having problems

    Take a look at the media section of my site here:

    http://www.wcdarchives.com/home/media.asp

    You should have to scroll unless your resolution is extremely high, and when you scroll down you will notice that my footer div is not in the correct location. Rather than being "stuck" to the bottom edge of the browser, it is "pushed up" the page. This occurs for all other pages that scroll too. However after a refresh, the footer renders in the correct location. Anyone have an idea why this would happen?

    Note: This occurs in mozilla browsers AND IE.
    www.stevenspoker.com
    "You can't lose what you don't put in the middle, ... but you can't win much either." -Mike McDermott (Rounders)

  2.  

  3. #2
    Senior Member
    Join Date
    Dec 2003
    Posts
    1,274
    Member #
    4362
    What do you mean?
    Attached Images Attached Images

  4. #3
    Senior Member Maverick's Avatar
    Join Date
    Sep 2003
    Location
    Hoboken, NJ
    Posts
    351
    Member #
    3253
    exactly what your screenshot shows, the horizontal bar with the striped background and my validator buttons and copyright notice should always be on the bottom of the page.

    If you refresh the page, it will render it the correct location.
    www.stevenspoker.com
    "You can't lose what you don't put in the middle, ... but you can't win much either." -Mike McDermott (Rounders)

  5. #4
    Senior Member
    Join Date
    Dec 2003
    Posts
    1,274
    Member #
    4362
    When you refresh, or when you have already visited it.
    Try this CSS on the #footer id:
    Code:
    #footer {width: 664px;
        	height: 30px;
        	background-image: url(images/footer.gif);
        	background-repeat: repeat-x;
        	background-color: #ffffff;
    	text-align: center;
        	}

  6. #5
    Senior Member Maverick's Avatar
    Join Date
    Sep 2003
    Location
    Hoboken, NJ
    Posts
    351
    Member #
    3253
    If I did that, and removed the absolute positioning, the footer would just follow the normal flow of the document. And if the content height is less than the height of the browser, the footer will not be at the bottom of the page.

    Correction from initial post: This DOES occur in IE too, so it appears to have something to do with my CSS.
    www.stevenspoker.com
    "You can't lose what you don't put in the middle, ... but you can't win much either." -Mike McDermott (Rounders)

  7. #6
    Senior Member justlivyalife's Avatar
    Join Date
    Jul 2003
    Location
    Birmingham, UK
    Posts
    2,871
    Member #
    2374
    Error not occuring for me, IE6, or in Moz Firefox 0.8, without reload on either of them.
    justlivyalife - The future depends on what we do in the present. (Mahatma Gandhi)
    WDF Resources: WDF Rules
    Non-WDF: JavascriptSource | Dynamic Drive | phpBB | HTML-Kit | Winamp | Download Firefox | Morguefile

  8. #7
    Senior Member
    Join Date
    Dec 2003
    Posts
    1,274
    Member #
    4362
    Hav you tried to put "vertical-align:bottom" on the div containing the footer?

  9. #8
    Senior Member Maverick's Avatar
    Join Date
    Sep 2003
    Location
    Hoboken, NJ
    Posts
    351
    Member #
    3253
    Originally posted by xarst
    Hav you tried to put "vertical-align:bottom" on the div containing the footer?
    Im pretty sure the vertical-align property only works for images.

    Anyway, I think I fixed it though, as confirmed by justlivyalife. All I did was move the absolute positioning properties in the #footer css block after all the other properties. Weird I know, but i guess the browsers gives the code more precendence or importance if its a the end of the code block.

    Everyone: Please let me know if it still renders wrong for you. Thanks.
    www.stevenspoker.com
    "You can't lose what you don't put in the middle, ... but you can't win much either." -Mike McDermott (Rounders)

  10. #9
    Senior Member Maverick's Avatar
    Join Date
    Sep 2003
    Location
    Hoboken, NJ
    Posts
    351
    Member #
    3253
    Ok, its not fixed.

    Apparently I was just looking at the cached version of my pages because after I cleared the cache, the footer problems (see first post) came back.

    To see what I mean look at any of my pages that scroll for you (depends on your resolution) For example the media or stevens sections under "Home". And like I mentioned in my first post, the problem dissappears upon refresh OR if you viewed the page recently (read: its still in your cache)

    I have no idea why its doing that, I have followed A List Apart's CSS footer guide almost to the letter. Any suggestions or speculation is welcome.
    www.stevenspoker.com
    "You can't lose what you don't put in the middle, ... but you can't win much either." -Mike McDermott (Rounders)

  11. #10
    Senior Member Maverick's Avatar
    Join Date
    Sep 2003
    Location
    Hoboken, NJ
    Posts
    351
    Member #
    3253
    No one has any idea?

    Com'om glyakk, you know you want to solve this CSS problem
    www.stevenspoker.com
    "You can't lose what you don't put in the middle, ... but you can't win much either." -Mike McDermott (Rounders)


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 05:46 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com