How do I fix a FireFox z-index bug?

April 23, 2008 2:31 PM

CSSfilter: How do I fix a FireFox z-index bug?

I've got a Firefox error. When an absolute-positioned div with a higher z-index scrolls over a fixed-positioned div with a lower z-index, in Firefox, the higher div gets jagged lines and text as it scrolls over the lower one.

Here's the page in question. Scroll way down and you'll see a gray bottom drawer that gets a jagged border and text as it covers the menu. You'll have to view it in Firefox to see the error, and there's a chance it's only a Firefox Mac error (ugh!). Here's an image of the problem.

I realize my fixed position elements won't work in earlier versions of IE. I have a separate stylesheet for that.

P.S. Is there a better / more appropriate place to post questions like this? When I designed sites using Adobe GoLive, I posted in their forums, but I created this site in a text-editor (and will then build in MovableType when I get the bugs worked out!). Is there a great web-design forum?

posted by 2oh1 to computers & internet (7 comments total)

It seems to be a specific Firefox/Mac error as my Firefox 2.0.0.4 copy has no problem rendering it.
posted by Memo at 2:42 PM on April 23

Yeah, I'm not seeing it on Firefox 3 beta 5/Linux.
posted by gsteff at 2:58 PM on April 23

Not showing up in Firefox beta 3/mac, or safari 3.0.4, but it is showing up in Camino 1.5.1, which, I believe, uses the same version of Gecko that your firefox probably uses.

I replaced this rule in the css:



#menu
{
color: #111111;
position: fixed;
top: 50%;
margin-top: -150px;
left: 40%;
margin-left: -330px;
width: 235px;
line-height: 1.4em;
text-align: center;
visibility: visible;
display: block;
}

With this:


#menu {
color: #111;
position: fixed;
top: 200px;
left: 200px;
width: 235px;
line-height: 1.4em;
text-align: center;
visibility: visible;
display: block;
}


It seemed to fix it. I think it's the percentages.

Gecko is probably rounding differently - use something other than percentages. Obviously I substituted ridiculously wrong numbers.
posted by kpmcguire at 3:17 PM on April 23

Yeah, looks fine in FF3b2 on an old 800MHz G4 running 10.4.11
posted by Pinback at 3:27 PM on April 23

A-HA! kpmcguire, I think you nailed it. The problem is that FireFox is having trouble with the top position as a percentage. I can keep the left position as a percent and the problem disappears, but as soon as I pop the top percentage in there, I get the error in Firefox on a Mac.
posted by 2oh1 at 3:43 PM on April 23

As for a good forum to talk CSS, I spent a while on the css-discuss list and highly recommend it. (I quit during a period when I was really paring down my email inputs. It is quite busy, or at least it was when I was on it a couple of years ago.)
posted by epersonae at 4:36 PM on April 23

Pretty much everytime I spot a CSS/Javascript question I can answer on AskMeFi someone else has gotten to it first, so it's not too bad a place for them.
posted by Artw at 5:06 PM on April 23