Grow your CSS skills. Land your dream job.

Position fixed doesn’t work in all Google Chrome

  • # July 11, 2012 at 5:56 am

    Hi!

    Like the title says, I have a problem with a position fixed div.
    I want to have a footer menu that stays in the bottom of the page all the time. The CSS looks like this:

    #footer_menu {
    position:fixed !important;
    z-index:499 !important;
    bottom:0 !important;
    left:0 !important;
    width:100%;
    height:4%;
    background:rgba(0,0,0,0.5);
    }

    #footer_menu ul.menu {
    margin-left:auto;
    margin-right:auto;
    width:972px;
    height:100%;
    }
    #footer_menu ul.menu li.leaf, #footer_menu ul.menu li.collapsed, #footer_menu ul li.expanded {
    min-width:119px;
    max-width:119px;
    color:#ffffff;
    background:rgba(30,87,125,0.6);
    position:relative;
    text-align:center;
    text-transform:uppercase;
    padding:0 !important;
    float: left;
    border-left:1px solid #ffffff;
    border-right:1px solid #ffffff;
    border-top:1px solid #ffffff;
    height:100%;
    behavior: url("/sites/halsingland/themes/halsingland/css/PIE.htc");
    list-style:none;
    margin-left:0%;
    }

    And the HTML looks like this:

    This works in all browsers, even some chrome browsers, but not all chrome browsers. It works on my computer at work, using chrome. It’s not working on my computer at home, using chrome.

    Is something wrong with the code? Is there a bug in Chrome? I can’t figure it out!

    If you have a solution, please help me.

    Best regards,
    Daniel Lundahl

    # July 11, 2012 at 7:03 am

    You say it’s not working…what precisely? Is the footer not staying at the bottom?

    Are you using different versions of Chrome and if so, in which version is the problem being seen?

    # July 11, 2012 at 7:12 am

    It’s the same version on all browsers I’ve tested. The footer is not staying at the bottom. It “goes up” when I scroll and if I hover the mouse at the bottom of the page, parts of the footer menu “pops up” where I hover the mouse.

    # July 11, 2012 at 7:13 am

    How is it not working on your home computer? But I think that this part can have something to do with it.

    #footer_menu  .inner {
    width:100%;
    height:100%;
    position:fixed !important;
    }

    This tells the #footer_menu .inner to break out of the #footer_menu and fill the entire screen. Though I cant’ see the .inner class being applied anywhere. Maybe in the javascript function?

    # July 11, 2012 at 7:18 am

    Really sorry. The .inner isn’t in use anymore. I used it when I tried to fix the problem.

    # July 11, 2012 at 10:08 am

    Working fine on my Chrome (Windows and Mac). The fact that it seems to work on *some* computers using Chrome but not all of them, leads me to believe it’s a local issue with the computers where it doesn’t work. Hard to say.

    # July 12, 2012 at 3:38 am

    It didn’t work after a fresh install of Windows 7 on my home computer, so I don’t think it can ba a local issue either? :S

    # July 12, 2012 at 1:55 pm

    Do you have this up on the web? Quickest way to get confirmation.

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

You must be logged in to reply to this topic.

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