title: JQuery UI CSS style sheet not working
body: <p>Regardless of what I do, the CSS style sheet will not work. I've been trying for days with no luck. Even when I download a demo, some of the style does not work. See here:</p>
  
  <p><a href="http://i.imgur.com/DsgMK.png" rel="nofollow">http://i.imgur.com/DsgMK.png</a> (tested in Chrome and Firefox)</p>
  
  <p>So, I made this test code using Google's CDN in hopes that someone else can see what I'm doing wrong.</p>
  
  <pre><code>&lt;html&gt;
  &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;head&gt;
      &lt;meta http-equiv="content-type" content="text-html; charset=utf-8" /&gt;
      &lt;link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/themes/sunny/jquery-ui.css" type="text/css" /&gt;
      &lt;title&gt;JQuery UI Test&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  &lt;/script&gt;
  
      &lt;!-- Accordion --&gt;
      &lt;h2 class="demoHeaders"&gt;Accordion&lt;/h2&gt;
      &lt;div id="accordion"&gt;
          &lt;div&gt;
              &lt;h3&gt;&lt;a href="#"&gt;First&lt;/a&gt;&lt;/h3&gt;
              &lt;div&gt;Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.&lt;/div&gt;
          &lt;/div&gt;
          &lt;div&gt;
              &lt;h3&gt;&lt;a href="#"&gt;Second&lt;/a&gt;&lt;/h3&gt;
              &lt;div&gt;Phasellus mattis tincidunt nibh.&lt;/div&gt;
          &lt;/div&gt;
          &lt;div&gt;
              &lt;h3&gt;&lt;a href="#"&gt;Third&lt;/a&gt;&lt;/h3&gt;
              &lt;div&gt;Nam dui erat, auctor a, dignissim quis.&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;!-- Button --&gt;
      &lt;h2 class="demoHeaders"&gt;Button&lt;/h2&gt;
      &lt;button id="button"&gt;A button element&lt;/button&gt;
      &lt;form style="margin-top: 1em;"&gt;
          &lt;div id="radioset"&gt;
              &lt;input type="radio" id="radio1" name="radio" /&gt;&lt;label for="radio1"&gt;Choice 1&lt;/label&gt;
              &lt;input type="radio" id="radio2" name="radio" checked="checked" /&gt;&lt;label for="radio2"&gt;Choice 2&lt;/label&gt;
              &lt;input type="radio" id="radio3" name="radio" /&gt;&lt;label for="radio3"&gt;Choice 3&lt;/label&gt;
          &lt;/div&gt;
      &lt;/form&gt;
  
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>This is what I get from the above code: <a href="http://i.imgur.com/j09RY.png" rel="nofollow">http://i.imgur.com/j09RY.png</a></p>
  
  <p>I would think this should be straightforward, but I must be doing something wrong. Thank you very much in advance!</p>