slide menu from background to left
<pre><code>    -------------
    | header    |
    ------------ 
    |  |        | 
    | L|content | 
    |  |        | 
    -------------

    -------------
    | header    |
 ---------------- 
|  &lt;- |         | 
| L   |content  | 
|  &lt;- |         | 
-----------------
</code></pre>

<p>I need to create a JQuery box of 250px width and 300 height. It will comprise of (1) header (2) a small bar on left which should toggle slide left ward (to display menu) and back at original position on  click and (3) a right section of content. I'm fairly new in JQuery and could think of following code which works more or less in chrome but fails dramatically in IE.</p>

<pre><code>&lt;html&gt;
&lt;head&gt;
    &lt;script src="jquery[1].js" type="text/JavaScript"&gt;&lt;/script&gt;
    &lt;style type="text/css"&gt;
        #gcontainer {
            height:300px;
            width:350px;
            background-color:#ffffff;
            margin-left:100px;

        }

        #gheader{
            height:50px;
            width:350px;
            background-color:#feee00;

        }

        #gtray{
            height:250px;
            background-color:#006600;
            width:130px;
            float:left;
            margin-left:0px;
            margin-right:0px;
            position:relative;
            z-index:0;
            overflow:hidden:
        }

        #gcontainer{
            height:250px;
            width:320px;
            margin-left:30px;
            background-color:darkblue;
            float:left;
            position:absolute;
        }
    &lt;/style&gt;

    &lt;script type="text/JavaScript"&gt;
    $(function(){
        $('#gtray').toggle(
        function()
            {
                $(this).stop(true).animate({marginLeft:'-100px'},'slow');
            }, 
        function()
            {
                $(this).stop(true).animate({marginLeft:'0px'},'slow');
            });
    });
    &lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;


&lt;div id="gcontainer"&gt;
    &lt;div id="gheader"&gt;&lt;h2&gt;HEADER&lt;/h2&gt;&lt;/div&gt;
    &lt;div id="gtray"&gt;
        &lt;span id="expander" style="width:30px;height:250px;float:left;background-color:red"&gt;O&lt;br&gt;p&lt;br&gt;e&lt;br&gt;n&lt;/span&gt;
        &lt;span style="float:left"&gt;asdas&lt;br&gt;SDasd&lt;br&gt;asdasdasd&lt;br&gt;asdasd&lt;br&gt;Sdasd&lt;/span&gt;
    &lt;/div&gt;
    &lt;div id="gcontainer"&gt;&lt;/div&gt;
&lt;/div&gt;

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

<p>please suggest.</p>
