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
  • 107 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by MidiMagic
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.