Question

I am working on a noscript chunk of code whereby I do some stuff that includes a <p> at the top of the page that alerts the users that he/she has JavaScript disabled.

The end result should look like the Stack Exchange sites when JavaScript is disabled (here is a screenshot of mine – SE looks similar except it is at the very top of the page):

I have it working OK, but I would love it if the red bar stayed fixed along the top, upon scrolling.

I tried using the position: fixed; method, but it ends up moving the p element and I can’t get it to look exactly the same as it does without the position: fixed; modification. I tried fiddling with CSS top and left and other positioning but it doesn’t ever look like I want it to.

Here is a CSS snippett:

<noscript>

<style type="text/css">

p.noscript_warning {
    position: fixed;
}

</style>

</noscript>

Answer 1

You should not have a space after the ..

p.noscript_warning {
    position: fixed;
    top: 0;
    width: 100%; /* For Browser Compatibility */
}

Check out the Fiddle here… 🙂