X
Tap here to go to the mobile version of the site.

Support Forum

javascript showing on page

Posted

I had one our websites showing the javascript on the page. After some searching I found out that the script tag inherits "display:block" and shows it's content. IMO that's a bit weird, but other Browser show the same behavior. My question is not to avoid this as I can easily avoid it but if this should be considered a bug in Firefox?

An example can be found here: http://test.timo-design.nl/firefox/scriptshowing.htm

HTML of this test page:

<!DOCTYPE html>
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
  <META http-equiv="Content-Script-Type" content="type">
  <title>Test Page
  </title>
  <style type="text/css">
  .Main *{display:block; background:#f80;}
  .Main h1{background:#0f0;}
  </style>
 </head>
 <body id="Body">
  <div class="Main">
   <h1>Script test</h1>
   <script>
    //This is an inline script which shows up in the page
    var x = 1
   </script>
  </div>
 </body>
</html>

Thanks, Timo

I had one our websites showing the javascript on the page. After some searching I found out that the script tag inherits "display:block" and shows it's content. IMO that's a bit weird, but other Browser show the same behavior. My question is not to avoid this as I can easily avoid it but if this should be considered a bug in Firefox? An example can be found here: http://test.timo-design.nl/firefox/scriptshowing.htm HTML of this test page: <pre><nowiki> <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <META http-equiv="Content-Script-Type" content="type"> <title>Test Page </title> <style type="text/css"> .Main *{display:block; background:#f80;} .Main h1{background:#0f0;} </style> </head> <body id="Body"> <div class="Main"> <h1>Script test</h1> <script> //This is an inline script which shows up in the page var x = 1 </script> </div> </body> </html></nowiki></pre> Thanks, Timo

Modified by cor-el

Additional System Details

Installed Plug-ins

  • Adobe PDF Plug-In For Firefox and Netscape 10.1.14
  • Citrix Online App Detector Plugin
  • Google Update
  • Office Authorization plug-in for NPAPI browsers
  • The plug-in allows you to open and edit files using Microsoft Office applications
  • Shockwave Flash 17.0 r0
  • 5.1.40416.0
  • Windows Presentation Foundation (WPF) plug-in for Mozilla browsers
  • iTunes Detector Plug-in

Application

  • User Agent: Mozilla/5.0 (Windows NT 6.0; rv:38.0) Gecko/20100101 Firefox/38.0

More Information

ErickRibeiro 0 solutions 10 answers

Put the SCRIPT tag outside of the DIV tag and it'll work.

Put the SCRIPT tag outside of the DIV tag and it'll work.

Modified by ErickRibeiro

jscher2000
  • Top 10 Contributor
8790 solutions 71881 answers

Helpful Reply

I would not call this a case of inheritance. Instead, you have expressly stated that every single element under .Main should be display:block by using the universal selector:

.Main *{display:block; background:#f80;}

Perhaps it would be more logical if the universal selector (*) had some exceptions. For example, one seldom if ever would want to style the script and style tags. But I don't think that is envisioned by the current "Standards", such as they are, so Firefox is unlikely to deviate from universal being 100% universal.

https://developer.mozilla.org/docs/Web/CSS/Universal_selectors

I would not call this a case of inheritance. Instead, you have expressly stated that every single element under .Main should be display:block by using the universal selector: .Main *{display:block; background:#f80;} Perhaps it would be more logical if the universal selector (*) had some exceptions. For example, one seldom if ever would want to style the script and style tags. But I don't think that is envisioned by the current "Standards", such as they are, so Firefox is unlikely to deviate from universal being 100% universal. https://developer.mozilla.org/docs/Web/CSS/Universal_selectors

Question owner

ErickRibeiro said

Put the SCRIPT tag outside of the DIV tag and it'll work.

Thanks, I know how to avoid this, it was more a question of this behavior is correct or not.

''ErickRibeiro [[#answer-739928|said]]'' <blockquote> Put the SCRIPT tag outside of the DIV tag and it'll work. </blockquote> Thanks, I know how to avoid this, it was more a question of this behavior is correct or not.

Question owner

jscher2000 said

I would not call this a case of inheritance. Instead, you have expressly stated that every single element under .Main should be display:block by using the universal selector: .Main *{display:block; background:#f80;} Perhaps it would be more logical if the universal selector (*) had some exceptions. For example, one seldom if ever would want to style the script and style tags. But I don't think that is envisioned by the current "Standards", such as they are, so Firefox is unlikely to deviate from universal being 100% universal. https://developer.mozilla.org/docs/Web/CSS/Universal_selectors

Agreed.

I now found in: http://www.w3.org/TR/html5/scripting-1.html

"... script ... The element does not represent content for the user."

But in: http://w3c.github.io/html-reference/script.html

I see,

Typical default display properties script { display: none; }

So it's a bit vague IMO :-)

''jscher2000 [[#answer-739937|said]]'' <blockquote> I would not call this a case of inheritance. Instead, you have expressly stated that every single element under .Main should be display:block by using the universal selector: .Main *{display:block; background:#f80;} Perhaps it would be more logical if the universal selector (*) had some exceptions. For example, one seldom if ever would want to style the script and style tags. But I don't think that is envisioned by the current "Standards", such as they are, so Firefox is unlikely to deviate from universal being 100% universal. https://developer.mozilla.org/docs/Web/CSS/Universal_selectors </blockquote> Agreed. I now found in: http://www.w3.org/TR/html5/scripting-1.html "... script ... The element does not represent content for the user." But in: http://w3c.github.io/html-reference/script.html I see, Typical default display properties script { display: none; } So it's a bit vague IMO :-)

Helpful Reply

Ok, there's much more you can show I wouldn't expect to work :-) I guess I'll have to live with it ;-)

 head, title, meta, link, script{color:#000; display:block; width:100%; min-height:1em;}
 head{background:#FF8; padding:0.3em;}
 title{background:#f00;}
 meta{background:#0f0; margin-bottom:0.3em;}
 link:link{background:#08f; margin-bottom:0.3em;}
 script{background:#00f; margin-bottom:0.3em;}
Ok, there's much more you can show I wouldn't expect to work :-) I guess I'll have to live with it ;-) head, title, meta, link, script{color:#000; display:block; width:100%; min-height:1em;} head{background:#FF8; padding:0.3em;} title{background:#f00;} meta{background:#0f0; margin-bottom:0.3em;} link:link{background:#08f; margin-bottom:0.3em;} script{background:#00f; margin-bottom:0.3em;}