title: Html Tab with a Close Button
body: <p>I want to have a tab with the title text and a closing button in either the top right or left corner. How can I achieve this?</p>
  
  <p>Picture for clarification</p>
  
  <pre><code>=============================
  | X                         |
  |                           |
  |         Text Here!        |
  =============================
  </code></pre>
  
  <p>Here is what I have tried so far...</p>
  
  <pre><code>&lt;li class="tabLi ui-state-default ui-corner-top "&gt;
              &lt;div&gt;
                 &lt;input type="button" name="close_tab" class="close_tab_button"/&gt;
                 &lt;a href="&lt;c:url value="/ex.url"&gt;&lt;/c:url&gt;"
                 title="Test"&gt; "Text Here!"&lt;/a&gt;
              &lt;/div&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p>With the following CSS</p>
  
  <pre><code>.close_tab_button {
     background-image:url("/messaging-center/resources/images/close_button.gif");   
  }
  </code></pre>
  
  <p>Currently what happens: The button pushes down the text and tab gets big, this happens because the input and the link do not overlap. </p>