jquery ui tabs close button beneath the text

Question

I m using jquery ui tabs

and i m using them with the function of dynamically closing them.

the example page here where clicking on the link 'add tab' leads to

adding of tabs in the tabs panel...

now in firefox the close buttons are displayed beneath the text of the tab

which is leading to garbled text in the tab panel or the body of the tabs

like other browsers how can i display it in same line

the css i m using is

     .ui-tabs { padding: .20em; zoom: 1; }
    .ui-tabs .ui-tabs-nav { list-style: none; position: relative; padding: .2em .2em 0; height:27px;  }
.ui-tabs .ui-tabs-nav li { position: relative; float: left; border-bottom-width: 0 !important; margin: 0 .2em -1px 0; padding: 0; font-size:63.5%;  }
.ui-tabs .ui-tabs-nav li a { float: left; text-decoration: none; padding: .5em 1em;  }
.ui-tabs .ui-tabs-nav li.ui-tabs-selected { padding-bottom: 1px; border-bottom-width: 0;  }
.ui-tabs .ui-tabs-nav li.ui-tabs-selected a, .ui-tabs .ui-tabs-nav li.ui-state-disabled a, .ui-tabs .ui-tabs-nav li.ui-state-processing a { cursor: text;  }
.ui-tabs .ui-tabs-nav li a, .ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a { cursor: pointer; font: 62.5%; }
.ui-tabs .ui-tabs-panel { padding: 1em 1.4em; display: block; border-width: 0; background:black; color:white; font-size: 12px; }
.ui-tabs .ui-tabs-hide { display: none !important; font: 62.5%; }

#tabs .ui-tabs-nav li a:hover { float: left; text-decoration: none; padding: .5em 1em; background-color: #868472; }
#tabs-profile .ui-tabs-nav li { position: relative; float: left; border-bottom-width: 0 !important; margin: 0 .2em -1px 0; padding: 0; font-size:75%; }

Please help

thanks
Pradyut
India

Answer 1

.ui-icon-close { float: left;}