Search code examples
cssz-indexfixed

Thumbnails grid wall as wall paper?


I want to make a wall of thumbnails to suit a screen resolution of 2560x1440px. I want the grid to sit behind my page acting as a background on the site.

However, when the page is scrolled the grid stays still. I have made some CSS and HTML and tested it in Firefox 4 and Chrome which seems to work fine. In IE8 it doesn't work, the page div doesn't overlap the grid wall but sits under it.

When testing CSS / HTML on IE use the proper format. Instead of just throwing the CSS and HTML on the page only.


Solution

  • That's because you don't have an HTML document. You just have some HTML tags that you are throwing at the browser, and the browser tries its best to use it, and does that surprisingly well.

    As you don't have a doctype tag, IE renders the page in quirks mode, which basically means that it tries to emulate the oldest possible way of doing everything. As position:fixed is a recent addition, it's not supported in this mode.

    A valid HTML document needs the html, head, title and body tags, and you need a doctype tag to keep the browser from rendering the page in quirks mode. So, the minimal HTML document that renders in standard compliant mode looks like this:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title></title>
    </head>
    <body>
    </body>
    </html>
    

    Your style tag goes inside the head tag, and the content goes inside the body tag.

    There are different doctype tags that you can use, depending on which version of HTML you want to use, see W3C's Recommended list of Doctype declarations.