Grow your CSS skills. Land your dream job.

for today I hate firefox

  • # June 1, 2008 at 2:35 pm

    You maybe think ‘huh? somebody who hates firefox?’ Normally IE brings all the problems, but right now I am struggling with some firefox-bug for about two hours (if it isn’t more). :x

    The link: http://edmin2.nl/temp/grip/index2.html

    I am working on making xhtml/css of a design and in the beginning it all went good. I am using the sticky-footer technique and a body background positioned at the bottom of the page. In Safari everything works as it should, but in Firefox the background isn’t positioned at the bottom of the page, but at the bottom of the screen. :roll: I tried all things that came in my mind, but didn’t get it right. Really frustrating that Firefox let’s me down this time. I hope somebody here can help me :?:

    # June 1, 2008 at 3:59 pm

    Looks like this is what’s screwing it up:

    Code:
    html, body {
    height:100%;
    }

    Just kill it.

    # June 1, 2008 at 4:06 pm

    It’s because the body is set to 100% before the background image is set, which is where the background is set. Since you need the 100% for the sticky footer to work you can’t change that.

    Instead set the background image to the pagewrap div and all should be fine.

    # June 1, 2008 at 6:30 pm

    First thank you for your response. But unfortunatly it won’t help…

    @Chris: in that case the sticky-footer won’t work anymore

    @Adam: that won’t be a good idea either, because then the background is bove the footer and it has to be on the bottom of the page.

    Someone else got an idea? Maybe there is a way to make special css for firefox? Because in Safari everything works fine…

    # June 2, 2008 at 9:51 am

    i think your problem lies in the div=’push’

    for the sticker footer to work (using the info in the http://ryanfait.com/resources/footer-stick-to-bottom-of-page/) the height of the push has to be the same (equal to) the height of the footer itself.

    your div=’push’ is 145px whereas your footer height is 125px.

    try changing that and see if it solves the problem.

    # June 2, 2008 at 1:47 pm

    Thanks for another try. But that won’t help the problem either. I made it 20px higher to make the margin between the content and the footer a little bigger.

    Someone else knows how to solve this problem in Firefox? Today I viewed the website in IE6 and it worked fine. This really looks like the upsidedown-world (or however you say that in English)

    # June 2, 2008 at 6:12 pm

    I’ve just tested what I suggested with firebug and it is in the footer, in the very bottom of the page.

    It works because of the -ve margin in the page wrap which coincides with the same height as the footer, ie the footer overlaps the main content.

    # June 2, 2008 at 7:10 pm

    Hi Adam,

    I tested it and you were right! It really works!
    Thank you so much! I can’t tell you how thankfull I am!
    I really had no idea anymore how to fix it, but now it’s perfect! :)

    Thanx! 8-)

    # June 3, 2008 at 9:45 am

    Just a quickie: Are you back to loving FF now? 8-)

    # June 3, 2008 at 5:07 pm

    Pleased I could be of service! 8-)

    # June 4, 2008 at 4:27 am

    @koewnet Haha yes my love for Firefox is back ;) Talking about Firefox, they are planning to come into the Guinness book of records: http://www.spreadfirefox.com/en-US/worldrecord/

    @adam it’s very cool that we can help eachother here :) thanks again ;)

    # June 4, 2008 at 1:44 pm

    They will get that world record, simply because it is a new record and no one has set it yet. lol

    good publicity ploy though.

    # April 20, 2011 at 6:29 pm

    see below…

    # April 20, 2011 at 6:31 pm

    I have a similar problem with Firefox: When I place the code for a Facebook Like Button to the WordPress Menu, it looks perfect in Safari because it adds it to the right of the last menu item.

    However, in Firefox, it throws it about 700 px to the right of the whole theme?

    How would I get this to look and do the same in Firefox?

Viewing 14 posts - 1 through 14 (of 14 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".