Why does the following jquery work in jsfiddle, but not on any browser?
<p>I tried opening the following code in both FF and chrome, nothing happened. But when I loaded the exact code in jsfiddle, it worked . </p>

<p><a href="http://jsfiddle.net/Nuh9w/" rel="nofollow">jsfiddle link</a></p>

<p>HTML: </p>

<pre><code>&lt;!doctype html&gt;

&lt;html&gt;
&lt;head&gt;
&lt;link rel="stylesheet" type="text/css" media="screen" href="fgerg.css" /&gt;
&lt;script type="text/javascript" src="jquery-1.7.2.js"&gt;&lt;/script&gt;


&lt;script type="text/javascript"&gt;
                $(document).ready(function() {



                    $('#showButton').click(function() {
                        $('#x2').css('visibility','visible');


                    });     
                });​

            &lt;/script&gt;   
&lt;/head&gt;

&lt;body&gt;
 &lt;input type="button" id="showButton" value="show" /&gt;
    &lt;p id="x"&gt; gergreg&lt;/p&gt;
    &lt;p id="x2"&gt; sadeijnfciu &lt;/p&gt;        
&lt;/body&gt;
    &lt;/html&gt;
</code></pre>

<p>CSS:</p>

<pre><code>#x {
display:none;
 }

 #x2 {
visibility: hidden;
}
</code></pre>

<p>For anyone interested, the rectangle after the last <code>});</code> caused the whole mess. Anyone know what is that ?
<img src="http://i.stack.imgur.com/uUwDK.png" alt="Wierd special character"></p>
