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..

    Php - Javascript - How do I know which pages are in color and which are in black and white?

    How to vertically align a form and image

    Do East Asian (e.g. Chinese) characters have baselines? How do they align with English in CSS?

    How should I create a web interface for my application? [closed]

    How to create a button with overlapping Ribbon Shape in CSS?

    How to make CSS Animation reverse on hover-out?

    How do I reference a javascript variable from a razor section?

    How to view browser's calculated CSS specificity?

    how to call all Google font CSS under specific font face

    How to get the “absolute” position of an html element

    how to set border spacing in javafx

    Show/Hide & Change CSS functions are not working

    How do I create CSS only tabs/pages with #hash URLs?

    How to scroll the fixed content in CSS and HTML

    How to center the buttons and make them same size

    How can I make the height of a div section to automatically adapt to the height of its content?

    How to make the div at the screen center not lower right corner?

    How to place button row and content left to image in bootstrap or css

    how to make background 100% on a top menu

    How could I achieve the same navigation using CSS3? (currently flash AS3)

    a div with height:1px appears very thicker in internet explorer 6. How to reduce it?

    How to change hover background on links in css?

    How to set all CSS values to their default? [duplicate]

    How can I skin / theme a windows forms application [closed]

    How to tell google bot to skip part of HTML?

    How to properly pad an HTML link?

    How to get CSS file to affect only a section of HTML

    How to set content area div height with dynamic header div

    How do horizontally align text next to an image with CSS

    How to make this breed of resizable vertical divider for two divs?