Avatar for Username

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

This thread was archived. Please ask a new question if you need help.

javascript showing on page

  • 5 replies
  • 2 have this problem
  • 22 views
  • Last reply by Timo88

Timo88
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

Modified by cor-el

All Replies (5)

ErickRibeiro
ErickRibeiro
more options

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

Modified by ErickRibeiro

jscher2000 - Support Volunteer
jscher2000 - Support Volunteer
  • Top 25 Contributor
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

Timo88
Timo88 Question owner
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.

Timo88
Timo88 Question owner
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 :-)

Timo88
Timo88 Question owner
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;}