Accordion: Line break after Icon problem

Accordion: Line break after Icon problem

Hello,

I searched before I posted this but didn't find anyone that was having this problem.

For some reason, the Icon of my Accordion header is getting put on a different line from the Header text itself.  I have attached an image of what is going on.

Upon Firebug inspection of the page, the HTML is as follows: 

  1. <h4>
        <a href="#">Communication Information</a>
    </h4> 
    <div id="comm" > 
        <div> 
            <label for="PhoneNumber">Phone Number:</label>     
            <input id="PhoneNumber" name="PhoneNumber" type="text" value="" /> 
        </div> 
        <div> 
            <label for="EmailAddress">Email Address:</label> 
            <input id="EmailAddress" name="EmailAddress" type="text" value="" /> 
        </div>
    </div>

After page load, the HTML is such:

  1. <h4 class="ui-accordion-header ui-helper-reset ui-state-active ui-corner-top" role="tab" aria-expanded="true" tabindex="0">
  2.     <span class="ui-icon ui-icon-triangle-1-s"></span>
  3.     <a href="#" tabindex="-1">Communication Information</a>
  4. </h4>


This is all within a <div id="accordion">.  When I construct the accordion on page load, this is how I am doing it:

  2. $(function() {
  3.             $("#accordion").accordion(
  4.        {
  5.            collapsible: true
  6.        },
  7.        {
  8.            autoHeight: false
  9.        }
  10.    );
  11.         });
Any idea on what the heck is going on?  Thanks!