1

Using <noscript> inside of another tag seems to cause it to take on its own style (that is, none), and forces the text inside to take its own line (even if display:inline is set with CSS). Is there any way to avoid this, or a workaround to use instead?

Here is what I mean: http://www.webdevout.net/test?01I

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
  <head>
    <title>Test</title>
 <style type="text/css">
  p { font-family:sans-serif; font-size:12px;}
  noscript {display:inline !important;}
 </style>
  </head>
  <body>
    <p>This is some text<noscript> that should be displayed on the same line with the same style if JS if disabled.</noscript></p>
  </body>
</html>
1
  • btw, what UAs you using? In IE8, fx3.5 it´s all on one line.
    – anddoutoi
    Mar 4, 2010 at 12:33

4 Answers 4

1

I would recommend a different approach over using script/noscript tags.

Something like this works best:

<!DOCTYPE html>
<html class="noJS">
    <head>
    <title>noJS Demo</title>

    <style type="text/css">
        html.noJS .jsRequired,
        html .noJS{
            display: none !important;
        }

            html.noJS span.noJS{
                display: inline !important;
            }

            html.noJS div.noJS{
                display: block !important;
            }
    </style>

    <script type="text/javascript">
        function onDocumentLoad(){
            var html = document.getElementsByTagName("html")[0];
            html.className = html.className.replace("noJS", "");
        }
    </script>
    </head>
    <body onLoad="onDocumentLoad();">
        <p>This is some text<span class='noJS'> that should be displayed on the same line with the same style if JS if disabled.</span></p>
    </body>
</html>

Of course, if you use a framework like jQuery the JavaScript is even easier, just remove the JS function and the function from the body, then just use the following JS:

$(document).ready(function(){
    $("html").removeClass("noJS");
});
1

Old but still relevant question - http://www.tigerheron.com/article/2007/10/alternative-noscript-tag presents an excellent and very simple solution:

"Insert the following code into the <head> section of your Web page:

<script type="text/javascript"> document.write('<style>.noscript { display:none }</style>'); </script>

When you need to use <noscript> inline, use <span class="noscript"> instead."

0
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
  <head>
    <title>Test</title>
 <style type="text/css">
  p { font-family:sans-serif; font-size:12px;}
 </style>
  </head>
  <body>
    <script type="text/javascript">document.write('<p>This is some text</p>');</script>
    <noscript><p>This is some text that should be displayed on the same line with the same style if JS if disabled.</p></noscript>
  </body>
</html>

Something like this should do what you want. You should of course use unobtrusive methods instead but I guess that´s above par for now.

2
  • Is it? I thought he only wanted the stuff in noscript to be hidden with no js, 'this is' being intentionally left out.
    – user241244
    Mar 4, 2010 at 9:39
  • Actually I don´t know what he wants cause I can´t see any added value. But my example will output 'This is some text' if scripts is supported and 'This is some text that should be displayed on the same line with the same style if JS if disabled.' if it´s unsupported. And this on the same line.
    – anddoutoi
    Mar 4, 2010 at 12:28
0

Have you tried putting an element like a span inside the noscript tag, and then styling the span? It's a long shot, but might work.

Alternatively, get very specific with your selector and give that a shot. Something like #content p noscript { display:inline !important; } might work. But it might also be insoluble.

As a last resort, you could ditch the noscript tag and put in a span (or your element of choice) and give it a class of noscript -- then remove that first thing in your js.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.