How to define CSS styles if Javascript is turned off? [duplicate]


Tags: javascript,html,css

Problem :

Possible Duplicate:
Embedding extra styles with noscript
Define css if javascript is not enabled

I am trying to define specific CSS styles only if Javascript is turned off. I am using:

<noscript>
    <style type="text/css">
    .needjs {display:none !important;}
    .mwnojs { margin-top: 40px !important; }
    </style>
</noscript>

When trying to validate the page source, I get the error "Element style not allowed as child of element noscript in this context".

So, how would I go about doing this while keeping my markup valid?



Solution :

Try something like this:

<html class="nojs">
<head>
<script type="text/javascript">
document.getElementByTagName("html")[0].className="";
</script>
<style>
html#nojs {
   /* do something */
}
</style>

This removes a class while loading the page. If javascript is not activated the class won't be removed.


    CSS Howto..

    How can I wrap lines of text in an unordered list?

    How do I center a button in html5?

    How to set the width of a jQuery Mobile 1.4 responsive Panel in percentage?

    How to make stylish pageviews counter using html and css? [closed]

    How to link a css file with the Slim templating engine?

    How can I display links in 2 rows?

    How to refere a stylesheet in phonegap?

    How to toggle overlay with no body scroll using the same button / div

    How can I align my HTML components with CSS?

    How to prevent crawlers depending on XPath from getting pages contents [duplicate]

    How do I overlap PNG images for a “build your own t-shirt” product display page - javascript/css/asp

    How to make jQuery UI nav menu horizontal?

    Show nested list on click in Joomla (1.7.0)

    How can I fix my CSS code to work with IE (where it shows scroll bars)?

    How to override inline css through javascript?

    How to make triangle shape in before a div in pure css?

    showing/hiding content is not working in JQuery/CSS

    How to use bootstrap-theme.css with bootstrap 3?

    How to use nested p tags in CSS and Bootstrap boxes?

    How to CSS: select element based on inner HTML

    How do I get Aptana Plugin for Eclipse to validate against CSS3, rather than CSS2?

    AngularJS - how to show an alert when the length of an array is zero and hide the default behavior?

    How to change elements display order in CSS?

    How to insert spaces/tabs in text using HTML/CSS?

    How do you align left / right a div without using float?

    How do i position this element relative to an image?

    Given the following HTML and CSS how can I get the input elment to fill the width of its parent?

    How to rotate and fade background images in and out with javascript/ASP.NET/CSS

    How to expire cached pages when only the CSS url changes

    How to create a code block on website