Page not loading custom jQuery UI Theme

Question

First off, I'm aware of the jQuery UI ThemeRoller - Installing themes question. However, after consulting it, I continue to have problems.

When I open the index.html included in the installation, I get this (the correct theme):

However, when I work it into my page, I get the following (default/failed installation):

First off, I don't like the Smoothness theme, and second, the font sizes are several times larger than the font on my page. I've taken both copies of jquery-ui-1.8.18.custom.css (from the css/custom-theme and development-bundle/theme/custom-theme) and copied the custom-theme directory to my styles directory, but it still doesn't work.

Here's what I have so far:

<link href="../styles/custom-theme/jquery-ui-1.8.18.custom.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="../scripts/jquery-ui-1.8.18.custom.min.js"></script>

And here's my directory tree:

pages/
    page1.html
    page2.html
styles/
    custom-theme/
        images/
            // bunch of files for jQuery UI theme
        jquery-ui-1.8.18.custom.css
    global.css
    reset.css  // note that on the page, this is defined before any other CSS
scripts/
    jquery-ui-1.8.18.custom.js
    // bunch of other custom scripts

Given this, why won't it display correctly?

Answer 1

Use Firebug to see whether your CSS files are being loaded. If they are being included successfully, use Firebug again to select a DOM element inside the popup and see where the CSS styles are coming from (i.e. which file).