simple use of jquery .css, .height, .width breaking in asp.net
<p>I am trying to use jquery to resize a div containing a 100% height/width image in an asp.net page.  I have some code that works fine as a simple html page.  Here it is:</p>

<pre><code>&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Image Resize Example&lt;/title&gt;
&lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
$(document).ready(function() {
    $("#SizeSelect").change(function() {
        var newDim = $(this).val();
        $("div.pillContainer").height(newDim);
        $("div.pillContainer").width(newDim);
    });
});
&lt;/script&gt;
&lt;style type="text/css"&gt;    
    div.pillContainer {
    width: 70px;
        height: 70px;
        display: block;
        margin: 20px;
    }
    div.pillContainer img {
        width: 100%;
        height: 100%;
    }
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;div class="pillContainer"&gt;&lt;img src="http://www.marvinandshea.com/Images/thumbs/friends_thumbs/friends%20(24).JPG" /&gt;&lt;/div&gt;

&lt;b&gt;Size:&lt;/b&gt; &lt;select id="SizeSelect" name="SizeSelect" &gt;
&lt;option value="50 px"&gt;Small&lt;/option&gt;
&lt;option value="70 px"&gt;Medium&lt;/option&gt;
&lt;option value="90 px"&gt;Large&lt;/option&gt;
&lt;/select&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>For some reason, as soon as I put this exact code in an .aspx page in between form tags runat=server, the re-sizing quits working.  To be specific, here's my broken aspx page:</p>

<pre><code>&lt;%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="MyMediHealth.Interface.WebForm1" %&gt;

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;

&lt;html xmlns="http://www.w3.org/1999/xhtml" &gt;
&lt;head&gt;
&lt;title&gt;Image Resize Example&lt;/title&gt;
&lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
$(document).ready(function() {
    $("#SizeSelect").change(function() {
        var newDim = $(this).val();
        $("div.pillContainer").height(newDim);
        $("div.pillContainer").width(newDim);
    });
});
&lt;/script&gt;
&lt;style type="text/css"&gt;
    div.pillContainer {
    width: 70px;
        height: 70px;
        display: block;
        margin: 20px;
    }
    div.pillContainer img {
        width: 100%;
        height: 100%;
    }
&lt;/style&gt;
&lt;/head&gt;

&lt;body&gt;
&lt;form id="form1" runat="server"&gt;

&lt;div class="pillContainer"&gt;&lt;img src="http://www.marvinandshea.com/Images/thumbs/friends_thumbs/friends%20(24).JPG" /&gt;&lt;/div&gt;

&lt;b&gt;Size:&lt;/b&gt; &lt;select id="SizeSelect" name="SizeSelect" &gt;
    &lt;option value="50 px"&gt;Small&lt;/option&gt;
    &lt;option value="70 px"&gt;Medium&lt;/option&gt;
    &lt;option value="90 px"&gt;Large&lt;/option&gt;
&lt;/select&gt;

&lt;/form&gt;
&lt;/body&gt;
</code></pre>

<p></p>

<p>Anybody know why it's not working and how to fix it?</p>
