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"&gt;
<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 year 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.

ansaurus

tags:

views:

answers:

How to get elements in jQuery UI to style and format correctly

related questions