How to get elements in jQuery UI to style and format correctly_问答_开发者

Here is my problem. I have on multiple occasions downloaded jQuery UI and tried to use it. What happens, though, is that in the examples provided in the download the UI elements look great, but in my pages when I try to use them all the formatting and style stuff is messed up. Here is an example of a date picker:

Good Example

Bad Example

Here is my code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Reports</title>

    <meta charset="UTF-8" />
    <meta http-equiv="CACHE-CONTROL" content="NO-CACHE" />
    <meta http-equiv="PRAGMA" content="NO-CACHE" />

    <link type="text/css" href="../css/jquery.ui.all.css" rel="stylesheet" />

    <script type="text/javascript" src="../scripts/jquery-1.4.2.js"></script>
    <script type="text/javascript" src="../scripts/jquery.ui.core.js"></script>
    <script type="text/javascript" src="../scripts/jquery.ui.widget.js"></script>
    <script type="text/javascript" src="../scripts/jquery.ui.datepicker.js"></script>

    <script type="text/javascript">

        $(function() {

            $('#start_date').datepicker({
                changeMonth: true,
                changeYear: true
            });

            $('#end_date').datepicker({
                changeMonth: true,
                changeYear: true
            });

        });

    </script>
</head>
<body>
    <form id="Form_Reports" method="post" action="Reports.aspx" runat="server">

    <!-- The date input form -->
    <table>
        <tbody>
            <tr>
                <td class="label">Start Date:</td>
                <td><input class="text" type="text" name="start_date" id="start_date" runat="server"/></td>
            </tr>
            <tr>
                <td class="label">End Date:</td>
                <td><input class="text" type="text" name="end_date" id="end_date" runat="server"/></td>
            </tr>
            <tr>
                <td class="label">Program</td>
                <td><select class="text" name="program_name" id="program_name" runat="server"></select></td>
            </tr>
        </tbody>
        <tbody>
            <tr>
                <td colspan="2" style="text-align:center"><input type="submit" name="cmdReport" value="Get the Report"/></td>
            </tr>
        </tbody>
    </table>

    </form>
</body>

Here is their code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>jQuery UI Datepicker - Display month &amp; year menus</title>
    <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
    <script type="text/javascript" src="../../jquery-1.4.2.js"></script>
    <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
    <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
    <script type="text/javascript" src="../../ui/jquery.ui.datepicker.js"></script>
    <link type="text/css" href="../demos.css" rel="stylesheet" />
    <script type="text/javascript">
    $(function() {
            $('#datepicker').datepicker({
                    changeMonth: true,
                    changeYear: true
            });
    });
    </script>
</head>
<body>

<div class="demo">

<p>Date: <input type="text" id="datepicker"></p>

</div><!-- End demo -->

<div class="demo-description">

<p>Show month and yea开发者_JS百科r dropdowns in place of the static month/year header to facilitate navigation through large timeframes.  Add the boolean <code>changeMonth</code> and <code>changeYear</code> options.</p>

</div><!-- End demo-description -->

</body>

For my page (an '.aspx' page, if that makes any difference) I have all the images in the image folder one level below the css file, just as it is in the example folder, and the script files are all together in another folder. Is there something I need that I don't have. I shouldn't need the "demo.css" file, should I? Is there a special naming convention for items in the form of the site? Is there some special way that I need to have the folders/css files/source scripts set up, like a certain folder configuration, to make it work?

Kind of lost on this one. Probably a really simple fix, but I'm pretty new to using this. Any help is appreciated.

If you open your page in the Firefox browser with FireBug installed, on the Net tab you will be able to see the missing resources. Something like there, but missing resources will be red.