Position fixed doesn’t work in all Google Chrome

[lundahldaniel]

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:

Link 1


Link 2


Link 3


Link 4


Link 5


Link 6


Link 7


Link 8

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

[Paulie_D]

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?

[lundahldaniel]

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.

[i3iorn]

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?

[lundahldaniel]

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

[Senff]

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.

[lundahldaniel]

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

[TheDoc]

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

[Author]

Posts