Search code examples
jqueryhtmljquery-tabs

UL overflow hidden is not working in both firefox and ie for jquery tabs

I have the following html code and the screenshot is shown below . The overflow hidden for Ul element is not working.kindly let me know.

enter image description here

<div id="sort_columns" class="ui-tabs ui-widget ui-widget-content ui-corner-all" style="padding: 2px; position: relative;  margin-left: 0px;">
<ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all" style="overflow: hidden; position: relative;">
    <li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active">
        <a href="#11">aaaaaaaaaaaaaa</a>
    </li>
    <li class="ui-state-default ui-corner-top">
<a href="#12">aaabbbbbbbbbbbb</a>
    </li>
    <li class="ui-state-default ui-corner-top">

</ul>
<div id="11" class="ui-tabs-panel ui-widget-content ui-corner-bottom">
</div>

</div>
Solution

  • overflow: hidden will not clip contents unless it has limited width and height. Otherwise it will just clear the floating elements inside it so they do not break out of the container. As @Dani commented, this is most likely by design.