Why does adding a @Scripts.Render("") alter my html layout?

Question

Ran into this 'funny' issue today. I have an asp.net mvc application, with a twitter bootstrap design template, which up until now has been working fine. However, when I added some @Scripts.Render("...") statements to the top of my view (Not shared layout file, but view) it seems to alter my layout!

View:

@Scripts.Render("~/Scripts/jquery.signalR-1.1.2.js")
@Scripts.Render("~/signalr/hubs")
@Scripts.Render("~/Scripts/Stimline/connector.js")

<div class="span12"> 
    <legend>Fleet List</legend>
    <div class="row-fluid">
       ...
    </div>
</div>

Whenever the three script statements at the top is added to my .cshtml file, it seems to move the entire div-part over to the right, so that it aligns with the edge of my browser. Removing the statements again causes it to go back to normal, adding the margin supposed to be there by default from bootstrap.

I have not done any changes to the bootstrap css.

Has anybody seen this, or at least something similar, before?

Here's how it looks with the @Render.Scripts statement:

And here's without it:

If you use the fixed header bar as a reference for right edge, you'll see that the table is aligned all the way to the right in one image, and correctly "spaced" from the edge in the other.

Answer 1

I recently ran into a similar issue where I was float li elements for a menu. I had each element on it's own line in the html, so a space was rendered between each item.

<ul>
    <li style="float:left">Item 1</li>
    <li style="float:left">Item 2</li>
    <li style="float:left">Item 3</li>
</ul>

changed to

<ul>
    <li style="float:left">Item 1</li><li style="float:left">Item 2</li><li style="float:left">Item 3</li>
</ul>

In your situation moving the script to the bottom of the page would be best to follow other best practices, but you could also remove the whitespace to get the same result.