jquery problem in Internet Explorer

See more:

ASP.NET

I am trying to do sliding in datalist through JQuery. it is working in Mozila,Chrome
but it is not working in IE. All content of datalist displaying Vertically.But I want horizontally this is happining in Mozila,Chrome but not in IE.I am trying as like this...

SCRIPT:-

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
 <script type="text/javascript" src="js/jquery.tinycarousel.min.js"></script>
 <script type="text/javascript">
     $(document).ready(function()
     {
     $('#slider1').tinycarousel();

     });

 </script>

HTML:-

<div id="slider1">
         <a class="buttons1 prev"  href="#">left</a>
        <div class="viewport">

                    <asp:DataList ID="DataList1" CssClass="Datalist" runat="server"  RepeatLayout="Flow" RepeatDirection="Horizontal" >
                    <HeaderTemplate>
                        <ul class="overview">
                    </HeaderTemplate>
                        <ItemTemplate>
                        <li>
                             <table>
                                <tr>
                                    <td class="links">
                                        <asp:HyperLink ID="hprJobtitle" runat="server" Target="_blank" Text='<%#Eval("Job_Title") %>'  CssClass="links" Font-Size="14px" NavigateUrl='<%#Eval("Job_id","JobSummary.aspx?ID={0}") %>' ForeColor="Blue"></asp:HyperLink>
                                        <asp:Label ID="Label9" runat="server" Text="(" Font-Size="11px"></asp:Label>
                                        <asp:Label ID="Label6" runat="server" Text='<%#Eval("Experience_Min") %>' Font-Size="11px"></asp:Label>-
                                              <asp:Label ID="Label7" runat="server" Text='<%#Eval("Experience_Max") %>' Font-Size="11px"></asp:Label>
                                               <asp:Label ID="Label8" runat="server" Text="yrs)" Font-Size="11px"></asp:Label>

                                    </td>
                                </tr>
                                <tr>
                                    <td>
                            <asp:Label ID="Label3" runat="server" Text='<%#Eval("CompanyName") %>' ForeColor="#669900"></asp:Label>
                            </td>
                            </tr>
                            <tr>
                              <td>
                            <asp:Label ID="Label5" runat="server" Text='<%#Eval("CompanyProfile") %>' Font-Size="12px"></asp:Label>
                            </td>
                            </tr>
                            <tr>
                              <td align="right">
                            <asp:HyperLink ID="HyperLink2" runat="server" Target="_blank" Text=">>read more"  CssClass="links" Font-Size="10px" NavigateUrl='<%#Eval("Job_id","JobSummary.aspx?ID={0}") %>' ForeColor="Blue"></asp:HyperLink>
                            </td>
                            </tr>
                            </table>
                        </li>
                        </ItemTemplate>
                      <FooterTemplate>
                            </ul>
                      </FooterTemplate>
                    </asp:DataList>

        </div>
        <a class="buttons next" href="#">right</a>

CSS:-

#slider1 { height: 100%; overflow:hidden; padding: 0 0 10px;   }
#slider1 .viewport { float: left; width:650px; height: 150px; overflow: hidden; position: relative; background-color:White }
#slider1 .buttons1 { background:url("../Images/hjbtn_lftInactive.png") no-repeat scroll 0 0 transparent; display: block; margin: 35px 0px 0 0; background-position: 0 -38px; text-indent: -999em; float: left; overflow: hidden; position: static; }

#slider1 .buttons { background:url("../Images/hjbtn_rgtActive.png") no-repeat scroll 0 0 transparent; display: block; margin: 35px 0px 0 0; background-position: 0 -38px; text-indent: -999em; float: left;  overflow: hidden; position: relative; }
#slider1 .next { background-position: 0 0;  height:100px; width:27px  }
#slider1 .prev { background-position: 0 0;  height:100px; width:27px  }
#slider1 .disable { visibility: hidden; }
#slider1 .overview { list-style: none; position: absolute; padding: 0; margin: 0; width: 240px; left: 0; top: 0; }
#slider1 .overview li{ float: left; margin: 0 20px 0 0; padding: 1px; height: 121px;  width: 236px;}