title: jQuery dialog: How do I alter the close tag style?
body: <p>I've got a jQuery dialog box, and I've had a look round but I can't find anything to style the close tag thats included within it automatically. I've read the documentation included in the downloaded, which can be found here:
  <a href="http://jqueryui.com/demos/dialog/" rel="nofollow">http://jqueryui.com/demos/dialog/</a> (navigate to the options tab)</p>
  
  <p>Thats not really helping much in all honesty, and I was just wondering if anyone could shed some light on the problem i'm having. For example, if you view this dialog box:
  <a href="http://jqueryui.com/demos/dialog/" rel="nofollow">http://jqueryui.com/demos/dialog/</a></p>
  
  <p>I'd like mine to use the little cross to, but instead mine just displays the word "close" in the top left corner and no matter what alterations I make in the CSS, I can't get it to do what I want, for reference I will put my code below:</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code> &lt;div id="column1"&gt;
       &lt;h2&gt;
       Features&lt;/h2&gt;
           &lt;p&gt;Click an image below to view more information on our products.&lt;/p&gt;
           &lt;a href="#" id="x-button"&gt;&lt;img src="../Images/lockIcon.png" alt="Security"/&gt;&lt;/a&gt;
                &lt;div id="dialog" style="display:none;"&gt;
                     &lt;p class="innerTitle"&gt;This is content!&lt;/p&gt;
                &lt;/div&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p><strong>jQuery</strong></p>
  
  <pre><code> &lt;script type="text/javascript"&gt;
                   $(document).ready(function(){
  
                       // Initialize my dialog
                       $("#dialog").dialog({
                          autoOpen: false,
                          modal: true,
                          width: 450
                      }
                      );
  
                      // Bind to the click event for my button and execute my function
                      $("#x-button").click(function(){
                          Foo.DoSomething();
                      });
  
  
                      var Foo = {
                          DoSomething: function(){
                              $("#dialog").dialog("open");
                          }
                      }
                  });
                  &lt;/script&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code> /* -------------------- ADDITIONAL -------------------- */
  
   #dialog 
   {
   width: 550px;
   height: 550px;
   background-color: #c8c8c8;
   background-image: url("../Images/orangeDivider.png");
   background-repeat:  repeat-x;
   background-position: top left;
   } 
  
   .innerTitle
   {
   padding-top: 10px;
   font-size: 14px;
   font-weight: bold;
   color: #808080;
   }
  </code></pre>
  
  <p>Thanks again people!</p>