1

We're using display: inline-block; to control elements that might live within the div of class "test". The javascript is now appearing on the page. I did not know "script" tags could ever render to the page. Has anyone found a way to work this example code to not hit elements such as "style" and "script"?

We're willing to use display:none; on our script and style tags but that's a kludge.

<html>
<head>
    <style type="text/css">
        .test * {
            display: inline-block;
        }
    </style>
</head>
<body>
    <div class="test">
        <p>Text here</p>    
        <script type="text/javascript">
            function TestFunction() {
                var test = 1;
            };
        </script>
    </div>
</body>
</html>

The output is:

Text here function TestFunction() { var test = 1; };

Improve this question
6
  • 2
    .test script { display: none; }, but it's better not to write selectors like .test * or put script tags deep into document. Commented May 28, 2014 at 18:59
  • 1
    .test * is more of a kludge Commented May 28, 2014 at 19:01
  • 2
    Why not just move the scripts into the head like they should be? Commented May 28, 2014 at 19:01
  • 1
    ..or at the bottom of the page. Either way, why make work for yourself. A script doesn't belong within a page element. Commented May 28, 2014 at 19:02
  • crazy, I've never seen this in 15 years of javascript-usage Commented May 28, 2014 at 19:07

3 Answers 3

Reset to default
3

The easiest way would be to change the .test * {} selector.

An alternate would be to bulldoze the style with something like:

script,style{
   display:none !important;
}

Here is a fiddle

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

Yes we had tested this solution but we weren't sure we wanted to kludge hide scripts that shouldn't appear anyway.
I understand. A better solution would be to un-kludge your css selector. I think the 'kludginess' of this solution depends on your need for your .test * {} selector vs some other, better selector.
We're going with this one since the time-constraints encourage using the * and "display:none" is the default for script tags. Chrome and Firefox both show the scripts and both respond to the fix above.
0

Just like you commented before, "We're willing to use display:none; on our script and style tags but that's a kludge." You're setting the tag to spill its guts with that .test * {display: inline-block}

A couple of things you could do.

  1. Take out the tag from within that div
  2. Don't use the * selector in CSS
  3. Add another rule within css .test script {display: none;}
Improve this answer

Comments

0

You can overwrite it with display: none; or you can use the :not() selector like so:

.test *:not(script) {
    display: inline-block;
}

Or, probably the best option would be to place your script tags just inside your </body> tag or in the head where they should go.

Improve this answer

4 Comments

or in the head where they should go.. actually the suggestion is to put all your script tags before </body> and also :not is supported only in modern browsers.
@RokoC.Buljan Good point about the script tags and modern browsers. If OP is not concerned about <IE9 support then it's no big deal though.
I'm afraid that in 2014 we still have to be afraid of everything. The age of free-to-use CSS3 is still to come :(
Indeed: "not concerned about <IE9 support "

Your Answer

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

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.