1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

CSS Footer bug (firefox)

Discussion in 'CSS' started by allthegoodnamesweretaken, Dec 9, 2010.

  1. #1
    Hi, i've installed a cms script onto my server. It's pretty basic (using mainly html and css with php) but there's a bug in one of the default skins with the footer.

    Basically, if there's not enough content on the page, the footer is meant to be pushed to the bottom of the screen. (Note it IS NOT a css "sticky footer"). In firefox this is broken, it's displayed fine in Chrome and (surprisingly) IE.

    I can't get help from the coder (my friend) as he's on holiday, so I thought i'd post here for help and also email him the fix. It's easy enough, i'm just pretty new when it comes to css.

    A demo installation of the script on the official site (with the problem) can be seen here: http://bit.ly/hceZ4f, and the css file found here: http://bit.ly/dM52CH

    Any help greatly appreciated :)

    PS. Could anyone check the site in a few browsers and confirm wether the skin is buggy or not please? I don't want to be running a live site that's a mess. So far:
    Chrome 8 (Windows) - Fine
    IE 8 (Windows) - Fine

    IE 7 - Untested
    IE 6 - Untested
    Firefox 3.0 - Untested
    Firefox 3.5 - Untested
    Firefox 3.6 - Broken
    Firefox 4 - Untested
    Safari (Mac) - Untested
     
    Last edited: Dec 9, 2010
  2. radiant_luv

    radiant_luv Peon

    Messages:
    1,327
    Likes Received:
    34
    Best Answers:
    1
    Trophy Points:
    0
    #2
    Assuming you'll have more content in future,

    at stylesheet.css
    
    #footer {
    position: absolute; [COLOR="red"]<-- delete this [/COLOR]
    }
    
    Code (markup):
     
    radiant_luv, Dec 9, 2010 IP
  3. allthegoodnamesweretaken

    allthegoodnamesweretaken Peon

    Messages:
    374
    Likes Received:
    8
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Hi radiant, big thanks for your help.

    However your "assuming you'll have more content in future" comment has thrown me off. Some pages will have enough content, and some won't - indefinitely. And for the ones that don't this shouldn't be a problem and the footer should display correctly.

    I've modified the css to your suggestion accordingly, but it will do what i've described above right? (edit: reverted the css back to how it was - your suggestion broke it in I.E.)

    ***UPDATE***
    I've added a test page, that's long scrolls (link in navbar), and as you can see the footer is broken in all browsers. It stays at the page is was and doesn't go to the bottom of the page it should

    Can anyone go give it a look and give me a fix for that too?

    Thanks :)

    TO CLEAR UP:
    - Firefox: Footer is broken, doesn't display where it should
    - Footer isn't pushed down to bottom when the page is long (all browsers)
     
    Last edited: Dec 9, 2010
  4. radiant_luv

    radiant_luv Peon

    Messages:
    1,327
    Likes Received:
    34
    Best Answers:
    1
    Trophy Points:
    0
    #4
    Go for a sticky footer. Also, take a look at this http://matthewjamestaylor.com/blog/bottom-footer-demo.htm

    I don't see anything abnormal. Perhaps, press Ctrl-F5 (forces a cache refresh) on your browser.
     
    radiant_luv, Dec 9, 2010 IP
  5. allthegoodnamesweretaken

    allthegoodnamesweretaken Peon

    Messages:
    374
    Likes Received:
    8
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Sorry, a sticky footer is not what I want.

    LMAO, that's the exact article i used to do the footer push!
    As I said, doing it just as described yields 2 problems:
    - Footer isn't pushed down to bottom when the page is long (all browsers)
    - Firefox: Footer is broken, doesn't display where it should (perhaps fixing the first bug will impact this)

    Sure you can't see anything? Go to the url provided and click "long page" in the nav bar. Still don't see anything?

    thanks so far, is there any other workarounds?
     
    Last edited: Dec 9, 2010
  6. radiant_luv

    radiant_luv Peon

    Messages:
    1,327
    Likes Received:
    34
    Best Answers:
    1
    Trophy Points:
    0
  7. allthegoodnamesweretaken

    allthegoodnamesweretaken Peon

    Messages:
    374
    Likes Received:
    8
    Best Answers:
    0
    Trophy Points:
    0
    #7
    That's weird. The code on it's own does exactly what I want, but when I modify my css (add that code in and take the old "solution" out) there is no change.

    There's obviously something conflicting, any guess as to what it is?

    I've reverted CSS back to how it was initially.

    UPDATE: I also tried matt james taylor's css (the one that's in use in conjunction with my current css) on it's own and it works. But when added to mine it doesn't.

    So there's definately some conflict somewhere but i don't know where
     
  8. CSM

    CSM Active Member

    Messages:
    1,047
    Likes Received:
    25
    Best Answers:
    0
    Trophy Points:
    55
    #8
    You don't need to be harsh to my friend...

    First of all you should learn basics about CSS. Your layout is really very easy, nothing special, but you made some mistakes generally:

    
    		position: absolute;
    		bottom:0;
    
    Code (markup):
    in the footer does exactly what you "tell" him to do. It stays at the bottom, when you resize the viewport it does NOT move to the bottom.

    If you want it fixed... use position:fixed.

    If you don't want it fixed, delete postion:absolute and bottom:0 ... and it is under the #main container where it belongs

    Also you have to notice that if you use padding you need to substract it from the width or height! Sometimes you need to ADD it, depends on the case.
     
    CSM, Dec 9, 2010 IP
  9. drhowarddrfine

    drhowarddrfine Peon

    Messages:
    5,428
    Likes Received:
    95
    Best Answers:
    7
    Trophy Points:
    0
    #9
    Always remember this: while IE may be showing what you want, Firefox is showing what you wrote. Never, ever trust IE to do ANYTHING right.
     
    drhowarddrfine, Dec 9, 2010 IP
  10. allthegoodnamesweretaken

    allthegoodnamesweretaken Peon

    Messages:
    374
    Likes Received:
    8
    Best Answers:
    0
    Trophy Points:
    0
    #10
    Where was I being harsh?

    Lol thanks, but I do know basics.

    I agree with this, i never said otherwise.

    When I do that, the footer becomes sticky at the bottom. I'm trying to make it so that the footer is pushed to the bottom ONLY when there is not enough content on the page, otherwise if there is then is should display how it would otherwise.

    As i said in a post before, using the code from this article: http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
    works on it's own, but not when it is added to my layout.

    Where is the conflict?

    Thanks for the tip.

    Thanks for your help so far, please reply so i can sort this out!
     
  11. CSM

    CSM Active Member

    Messages:
    1,047
    Likes Received:
    25
    Best Answers:
    0
    Trophy Points:
    55
  12. allthegoodnamesweretaken

    allthegoodnamesweretaken Peon

    Messages:
    374
    Likes Received:
    8
    Best Answers:
    0
    Trophy Points:
    0
    #12
    Thanks for your reply, i do appreciate you spending your time trying on my problem, however that can't help. Infact no article can, only someone like yourself - since i need someone to look at my specific situation.

    Maybe I wasn't clear earlier/you misunderstood what my problem is. Let me explain again:
    - I want to incorporate the following css method: http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page onto my website. If you download the source of the demo (http://matthewjamestaylor.com/blog/bottom-footer-demo.htm), it works exactly as it should.
    - However, when combined with my current css stylesheet (http://bit.ly/dM52CH) on my website (http://bit.ly/hceZ4f), that css trick doesn't work properly.
    - Therefore, there must be a conflict somewhere within the css. My question is, what is part of my current css code is conflicting with the css code from that footer trick? And please would you be so kind as to give me the fixes.

    Like you said earlier, my css file is very easy and nothing special, therefore the problem should be very easy to sort.

    Hope i made things clearer, please reply! :)
     
  13. CSM

    CSM Active Member

    Messages:
    1,047
    Likes Received:
    25
    Best Answers:
    0
    Trophy Points:
    55
    #13
    Do me a favour, zip all your html/css stuff into a file and upload it somewhere. PM me the link to the zip file...

    and I will take a look at it tomorrow morning.
     
    CSM, Dec 9, 2010 IP
  14. radiant_luv

    radiant_luv Peon

    Messages:
    1,327
    Likes Received:
    34
    Best Answers:
    1
    Trophy Points:
    0
    #14
    Upload the files, It would be easier to execute as well.
     
    radiant_luv, Dec 9, 2010 IP
  15. CSM

    CSM Active Member

    Messages:
    1,047
    Likes Received:
    25
    Best Answers:
    0
    Trophy Points:
    55
    #15
    Mornin' radiant_luv.

    I got the package and will have a look at it later :)
     
    CSM, Dec 9, 2010 IP