Crazy CSS Issue only in Firefox - fixed color and background color

Question

See this link:

http://lsp2.tpdserver2.co.uk/test.htm

Displayed fine in IE / Chrome, but in Firefox (6.0.1) there is a 1px border around the blue title.

If I add a background color to the content of the # header, the 1px white border will disappear. It seems crazy.

I can’t understand what is happening with this, and the page that I am trying to create related to it depends on whether there is a background color for the second fixed container.

Here is a picture of the problem I see:

Image link

Answer 1

This is a layout error in Firefox. This bug has already been reported, and as far as I know, it has been fixed in the next release. The only solution I know is to use opacity:0.9999999 . It will look correct as opacity: 1, but fix this annoying mistake.

Try #header { opacity:0.9999999; } #header { opacity:0.9999999; }

Bugzilla: Error 677095

EDIT: Firefox 8 is not affected by this error, and the opacity parameter in 0.9999999 will lead to a strange border around the element, so I prefer not to use it anymore

Answer 2

Browsers add different default values, if you don’t “reset” the CSS, this may be what happens here.

Answer 3

If the z-index value of your #header-content not more than 10, the error will be fixed. If he is 11 or more, I also see a mysterious gap.

Really strange.

Answer 4

I can not reproduce in FF 6.0.1; however, perhaps you can get around this with

background-color: transparent;

in the heading # or in white if you do not want it to be viewed.

This should still give the fix you mentioned, while leaving an empty div.

Update:

Well thanks for the screenshot, I still can’t reproduce, this time with ff 6.0.2 - I looked around after I noticed that I can reproduce a similar problem at different zoom levels.

A blog post explaining the scale-out error that includes this test page . I'm not sure if this is connected, it seems to be similar, but not the same, a zoom error will remove a fragment of the entire page, including the border # header-content.

As for your comments around transparency, you can use them and still provide a background image, doesn't this work for you?