THE PROBLEM IS SOLVED: I specified right: 0px instead of top: 0px … I

Question

0

Asked: May 25, 20262026-05-25T20:56:58+00:00 2026-05-25T20:56:58+00:00

THE PROBLEM IS SOLVED: I specified right: 0px instead of top: 0px … I

0

THE PROBLEM IS SOLVED: I specified right: 0px instead of top: 0px…

I have a problem with CSS’ position: fixed; both in Firefox (6.0.2), Chromium (12.0.742.112) and Konqueror (4.6.2). Consider the following example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
  <body>
    <div style="background: grey; position: fixed; left: 0px; right: 0px; width: 100%; height: 100%;">
      ...
    </div>
    <div id="page2" style="margin: 50px;">
      test
   </div>
  </body>
</html>

My aim is that the first <div> is concealing the whole viewport, but in all three browsers, it does not occludes the topmost 50+x pixels — which is exactly the top margin of the second <div>. Can anyone tell me what the problem is and how I can fix this without dirty hacks?

Note that inserting any text between the first and the second <div> decreases the problem in the sense that only the topmost x picels are not occluded, which also can be removed by adding style="margin: 0px;" to the <body> tag. The result of the above sample code as well as the version with an “x” added between the two <div>‘s in Konqueror can be seen
here: Example in Konqueror