Member Avatar for Infeligo

Hello, I'm having trouble with jQuery.UI tabs. I use one-column liquid layout, that is: in a "Main" div there is "Floated" column and in the content area there is "MainContent" with margin equal to the width of the column. When I place tabs in the content area, the height of its <ul> part (which makes up the tabs themselves) for some reason becomes equal to the height of the floated column. I see this in Firefox and Opera, but not in IE.

I will post HTML file here, but not the jQuery.UI part. Full primer of the problem can be found in the attached archive.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test</title>
<link type="text/css" href="js/theme/ui.all.css" rel="Stylesheet" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.ui.js"></script>

<style type="text/css">
/*<![CDATA[*/
body
{
  margin: 0px;
  font-size: 12px;
  font-family: Verdana, Tahoma, Arial;
}

#Main
{
  width: 600px;
  margin-left: auto;
  margin-right: auto;
  border: 2px solid #666666;
}

#Floated
{
  float: left;
  width: 300px;
  height: 400px;
  border: 2px dashed #0000FF;
  background-color: #BBBBBB;
}

#MainContent
{
  margin-left: 330px;
  background-color: #99AA99;
  height: 500px;
}
/*]]>*/
</style>

<script type="text/javascript">
//<![CDATA[
    $(document).ready(function() {
        $("#Tabs").tabs();
    });
//]]>
</script>
</head>

<body>
  <div id="Main">
    <div id="Floated">
        <p>Floated content here</p>
    </div>

    <div id="MainContent">
      <div id="Tabs">
        <ul>
          <li><a href="#tabs-1">Tab 1</a></li>
          <li><a href="#tabs-2">Tab 2</a></li>
          <li><a href="#tabs-3">Tab 3</a></li>
        </ul>

        <div id="tabs-1">
          <p>Tab #1</p>
        </div>

        <div id="tabs-2">
          <p>Tab #2</p>
        </div>

        <div id="tabs-3">
          <p>Tab #3</p>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

Hope for your help.

tryme.zip (110.27 KB)
  • 2 Contributors
  • 2 Replies
  • 125 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by MidiMagic

Dani AI

Generated

Good catch by : the odd height comes from the clearfix jQuery UI attaches to the tabs list. The library adds a pseudo-element with clear: both to force internal floats to be cleared, but because the left column is a preceding float in the same block formatting context that pseudo-element is pushed below that float — which makes the <ul> appear as tall as the floated column in Firefox/Opera. This follows the CSS behaviour of the clear property (MDN: clear).

Practical fixes that keep the tabs looking correct while avoiding global changes to jQuery UI:

  • Scope the clearfix to the tabs element and switch to a “micro clearfix” that does not inject visible content, or make the UL a normal block so it does not interact with external floats.
  • Another approach is to create a new block formatting context (BFC) on the tabs container (for example via overflow or display changes) so external floats no longer affect internal clears.

Example scoped override (place after the jQuery UI css):

#Tabs > ul.ui-helper-clearfix {
  display: block;            /* avoid inline-block / baseline interactions */
  overflow: visible;         /* keep dropdowns or visuals intact */
}
#Tabs > ul.ui-helper-clearfix::after {
  content: "";
  display: table;
  clear: both;
}

Quick debugging workflow: inspect the UL with DevTools, temporarily remove the ui-helper-clearfix class to confirm the cause, then apply the override and re-check in Firefox/Opera. Note: 's claim that 0px is invalid is incorrect — zero can be written with or without units; both forms are accepted by browsers (see MDN: length units).

Recommended Answers

All 2 Replies

Member Avatar for Infeligo

It has something to do with the way jQuery's CSS puts height of that list. They use ":after" pseudo-selector and "clear" property.

.ui-helper-clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.ui-helper-clearfix { display: inline-block; width: 98%; }
/* required comment for clearfix to work in Opera \*/
* html .ui-helper-clearfix { height:1%; }
/*.ui-helper-clearfix { display:block; }*/
/* end clearfix */

Well, the problem is localized, but I can get it to work properly.

Member Avatar for MidiMagic

0px is an invalid style. Never attach a unit of measure to a 0 value. It invalidates the entire style.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.