jquery ui tabs close button beneath the text
- by Pradyut Bhattacharya
Hi
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
