How to prevent line break before and after <script> tag (JavaScript) in HTML?

Question

I'm currently working on a website written in HTML (and CSS of course) I have one JavaScript in it... just a little slideshow.

There's an anchor tag with an image in it before the script and after the script there's also a anchor tag with an image in it.

...
<a href="... .html">
    <img class="img" src="... .png" title="..."></a>
<script type="text/javascript">
    <!-- the script text -->
</script>
&nbsp;&nbsp;&nbsp;
<a href="... .html">
    <img class="img" src="... .png" title="..."></a>
...

My problem is the line break before and after the script tag. I want it to be

image slideshow(script) image

All used images (including the slideshow content) have the same height.

I've tried display: inline; and white-space: nowrap; (and every other white-space thing) I've put it both directly into the in the html file (style="display:inline;" or style="white-space:nowrap;" and into the css file (script { display: inline; } and script { white-space: nowrap; })

Does anybody know how to prevent the line breaks before and after the script tag??

The script tag should not be in your HTML body to begin with. — Diodeus - James MacFarlane
– Diodeus - James MacFarlane, Commented Dec 5, 2012 at 19:02
You could try script{display:none} but that should be the default anyways. — John Dvorak
– John Dvorak, Commented Dec 5, 2012 at 19:06
also note that   is not a good substitute for real margins. — John Dvorak
– John Dvorak, Commented Dec 5, 2012 at 19:06
Any chance you could have accidentally set display:block to one of the a's or imgs? — John Dvorak
– John Dvorak, Commented Dec 5, 2012 at 19:08
It not the script tag causing the line break, it's the script. If you replace your script with something like 'var x = 0;' you'll see there is no break. But also what Diodeus said. — MikeSmithDev
– MikeSmithDev, Commented Dec 5, 2012 at 19:09

Brandon Clapp · Accepted Answer · 2012-12-05 19:56:25Z

2

I would recommend putting each of these elements in a separate div, giving them a fixed width, then floating them accordingly (be sure to clear your floats if you do this).

ie

<div id="leftImg" style="width:220px; float:left;">
<img src="..." />
</div>

<div id="slideShow" style="width:220px; float:left;">
<script>your script here</script>
</div>

<div id="rightImg" style="width:220px; float:left;">
<img src="..." />
</div>

<div style="clear:left;"></div>

Edit: There is nothing wrong with a slideshow script being in the body of your page. If it were a script that posted information then server side validation would have to be done for security purposes, but there is nothing wrong with how you're doing it.

edited Dec 5, 2012 at 19:56

answered Dec 5, 2012 at 19:48

Brandon Clapp

71.4k6 gold badges23 silver badges25 bronze badges

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

Comments

Andres · Accepted Answer · 2017-09-05 15:33:06Z

1

Place the script inside a hidden div.

<div style="display:none"><script>...</script></div>

answered Sep 5, 2017 at 15:33

Andres

111 bronze badge

Collectives™ on Stack Overflow

How to prevent line break before and after <script> tag (JavaScript) in HTML?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related