Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

Lolu chungechunge lwabekwa kunqolobane. Uyacelwa ubuze umbuzo omusha uma udinga usizo.

javascript showing on page

  • 5 uphendule
  • 2 zinale nkinga
  • 22 views
  • Igcine ukuphendulwa ngu Timo88

more options

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

Okulungisiwe ngu cor-el

All Replies (5)

more options

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

Okulungisiwe ngu ErickRibeiro

more options

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

more options

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.

more options

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 :-)

more options

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;}