Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Position fixed doesn’t work in all Google Chrome

  • This topic is empty.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #38858

    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

    #105874
    Paulie_D
    Member

    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?

    #105875

    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.

    #105876
    i3iorn
    Member

    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?

    #105877

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

    #105872
    Senff
    Participant

    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.

    #105923

    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

    #105965
    TheDoc
    Member

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

Viewing 8 posts - 1 through 8 (of 8 total)
  • The forum ‘CSS’ is closed to new topics and replies.