Crazy CSS Issue in Firefox Only - position fixed and background color

Question

See this link:

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

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

If I add a background color to the #header-content, the 1px white border dissapears. This seems crazy.

I cannot work out what is going on with this and the related page I am trying to build depends on not having a background colour for the 2nd fixed container.

Here is an image of the problem I see:

Link to Image

Answer 1

It is layout rendering bug in Firefox. This bug was already reported and as I know it is fixed in next release. Only solution I know is to use opacity:0.9999999. It would render correctly as opacity:1, but fix this annoying bug.

Try #header { opacity:0.9999999; }

Bugzilla : Bug 677095

EDIT: Firefox 8 is not affected with this bug and setting opacity to 0.9999999 will result in weird border around the element, so I prefer not to use it anymore