tags:

views:

4492

answers:

3
+3  Q: 

Using jquery tabs with my layout my tabs have a huge gap before they start

I currently have a 2 column site layout, with a footer/header, a fixed width left column which contains a menu, and a right hand column which takes the rest of the available space. My lefthand column contains a fold out menu, and it seems that when I have tabs in the right hand column, the text within the selected tab only begins after the end of my lefhand menu ends.

I've tried using a clear:both; before tabs begin which causes the entire tabs to shift downward, and begin after the lefhand menu ends.

Here is the code I'm currently using:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd"&gt;
<html>
<head>
  <meta name="generator" content="HTML Tidy for FreeBSD (vers 1st August 2003), see www.w3.org">
  <meta http-equiv="Content-Type" content="text/html; charset=us-ascii">
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"&gt;
  </script>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.6/jquery-ui.min.js"&gt;
  </script>
  <style type="text/css">
                body{
                        margin: 0;
                        padding: 0;
                }
                #container{
                        margin: 0;
                        background-color: #FFF;
                }
                #header{
                        background-color: #666;
                        border-bottom: 1px solid #333;
                }
                #header h1{
                        margin: 0;
                        padding: .5em;
                }
                #nav{
                        float: left;
                        width: 160px;
                        margin-left: 10px;
                        padding-top: 1em;
                }
                #nav p { margin-top: 0; }
                #content{
                        padding: 0;
                        margin: 0 0 0 180px;
                }
                #footer{
                        clear: both;
                        background-color: #666;
                        padding: 1em;
                        text-align: right;
                        border-top: 1px solid #333;
                }
                #header, #footer {
                        font-size: large;
                        text-align: center;
                        padding: 0.3em 0;
                }
  .menu { margin: 10px; height: 100px; font-size: 8pt; font-family: verdana; }
  .menu ul { margin: 0pt; padding: 0pt; position: relative; z-index: 500; list-style-type: none; width: 125px; }
  .menu li { background-color: #cccc99; float: left; }
  .menu li.sub { background-color: #cccc99; }
  .menu table { position: absolute; border-collapse: collapse; top: 0pt; left: 0pt; z-index: 100; font-size: 1em; margin-top: -1px; }
  .menu a, .menu a:visited { border: 1px solid #ffffff; display: block; text-decoration: none; height: 2em; line-height: 2em; width: 125px; color: #000000; padding-left: 1em; font-weight: normal; font-style: normal; font-variant: normal; text-transform: none; }
  .menu b { float: right; margin-right: 5px; }
  * html .menu a, * html .menu a:visited { width: 125px; }
  * html .menu a:hover { color: #ccff66; background-color: #999966; position: relative; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; text-transform: none; }
  .menu li:hover { position: relative; }
  .menu a:active, .menu a:focus { color: #ccff66; background-color: #999966; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; text-transform: none; }
  .menu li:hover > a { color: #ccff66; background-color: #999966; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; text-transform: none; }
  .menu li ul { padding: 2em; visibility: hidden; position: absolute; top: -2em; left: 7em; background-color: transparent; }
  .menu li:hover > ul { visibility: visible; }
  .menu ul a:hover ul ul { visibility: hidden; }
  .menu ul a:hover ul a:hover ul ul { visibility: hidden; }
  .menu ul a:hover ul a:hover ul a:hover ul ul { visibility: hidden; }
  .menu ul a:hover ul { visibility: visible; }
  .menu ul a:hover ul a:hover ul { visibility: visible; }
  .menu ul a:hover ul a:hover ul a:hover ul { visibility: visible; }
  .menu ul a:hover ul a:hover ul a:hover ul a:hover ul { visibility: visible; }
  .footer
  {
        text-align: center;
        font-family: Arial, sans-serif;
        font-size: 11px;
        color: #CCCCCC;
  }
  .ui-wrapper { border: 1px solid #383838; }
  .ui-wrapper input, .ui-wrapper textarea { border: 0; }
  .ui-tabs-hide {
        display: none !important;
  }
  .ui-tabs-nav, .ui-tabs-panel {
    font-family: Arial, sans-serif;
    font-size: 13px;
        color: #CCCCCC;
        background-color: #242424;
  }
  .ui-tabs-panel a {
        color: #FFD100;
        cursor: pointer;
        outline: none;
  }
  .ui-tabs-nav {
    list-style: none;
    margin: 0;
    padding: 0 0 0 3px;
  }
  .ui-tabs-nav:after { /* clearing without presentational markup, IE gets extra treatment */
    display: block;
    clear: both;
    content: " ";
  }
  .ui-tabs-nav li {
    float: left;
    margin: 0 0 0 2px;
  }
  .ui-tabs-nav a, .ui-tabs-nav a span {
        color: #FFD100;
    float: left; /* fixes dir=ltr problem and other quirks IE */
    padding: 0 12px;
  }
  .ui-tabs-nav a {
    margin: 5px 0 0; /* position: relative makes opacity fail for disabled tab in IE */
    padding-left: 0;
    background-position: 100% 0;
    text-decoration: none;
    white-space: nowrap; /* @ IE 6 */
    outline: 0; /* @ Firefox, prevent dotted border after click */
  }
  .ui-tabs-nav a:link, .ui-tabs-nav a:visited {
    color: white;
  }
  .ui-tabs-nav .ui-tabs-selected a {
    position: relative;
    top: 1px;
    z-index: 2;
    margin-top: 0;
    background-position: 100% -23px;
  }
  .ui-tabs-nav a span {
    padding-top: 1px;
    padding-right: 0;
    height: 20px;
    background-position: 0 0;
    line-height: 20px;
  }
  .ui-tabs-nav .ui-tabs-selected a span {
        color: white;
    font-weight: bold;
    padding-top: 0;
    height: 27px;
    background-position: 0 -23px;
    line-height: 27px;
  }
  .ui-tabs-nav .ui-tabs-selected a:link, .ui-tabs-nav .ui-tabs-selected a:visited,
  .ui-tabs-nav .ui-tabs-disabled a:link, .ui-tabs-nav .ui-tabs-disabled a:visited { /* @ Opera, use pseudo classes otherwise it confuses cursor... */
    cursor: text;
  }
  .ui-tabs-nav a:hover, .ui-tabs-nav a:focus, .ui-tabs-nav a:active,
  .ui-tabs-nav .ui-tabs-unselect a:hover, .ui-tabs-nav .ui-tabs-unselect a:focus, .ui-tabs-nav .ui-tabs-unselect a:active { /* @ Opera, we need to be explicit again here now... */
    cursor: pointer;
  }
  .ui-tabs-disabled {
    opacity: .4;
    filter: alpha(opacity=40);
  }
  .ui-tabs-nav .ui-tabs-disabled a:link, .ui-tabs-nav .ui-tabs-disabled a:visited {
    color: #000;
  }
  .ui-tabs-panel {
    padding: 10px;
    background: #242424; /* declare background color for container to avoid distorted fonts in IE while fading */
  }

  </style>

  <script type="text/javascript">
  $(document).ready(function() {
  $("#tabs > ul").tabs();} );
  </script>

  <title></title>
</head>

<body>
  <div id="container">
    <div id="header">
      Header
    </div>

    <div id="nav">
      <div class="menu">
        <ul>
          <li><a href="#">Home</a></li>

          <li><a href="#">Page1</a></li>

          <li><a href="#">Page2</a></li>

          <li><a href="#">Page3</a></li>

          <li><a href="#">Page4</a></li>

          <li><a href="#">Page5</a></li>

          <li><a href="#">Page6</a></li>

          <li><a href="#">Page7</a></li>

          <li><a href="#">Page8</a></li>

          <li><a href="#">Page9</a></li>

          <li><a href="#">Page10</a></li>

          <li><a href="#">Page11</a></li>

          <li><a href="#">Page12</a></li>
        </ul>
      </div>
    </div>

    <div id="content">
      <div class="main">
        <h1>Main Body Here</h1><br>

        <div id="tabs">
          <ul>
            <li><a href="#one"><span>One</span></a></li>

            <li><a href="#two"><span>Two</span></a></li>

            <li><a href="#three"><span>Three</span></a></li>
          </ul>

          <div id="one">
            Tab One Here
          </div>

          <div id="two">
            Tab Two Here
          </div>

          <div id="three">
            Tab Three Here
          </div>

        </div>
      </div>
    </div>

    <div id="footer" class="footer">
      Footer
    </div>
  </div>
</body>
</html>

Any help would be apperciated. Thanks.

Note: Jquery 1.3, Jquery-ui 1.6

+3  A: 

Try this:

.ui-tabs-nav { height:2em; }
Chris Pebble  2009-04-20 20:50:02
Perfect, that was exactly what I was looking for :) Thanks!
Rob  2009-04-20 20:54:55
+1  A: 

Clearing, by default, applies fairly globally. That's what's causing the error you see - the #nav comes before the tabs in the content, so the clear:both will clear it (you're actually using clear:both on .tabs::after, but same diff).

In order to 'contain' the clear and keep it from interacting with elements from elsewhere in the page, you need to float the container as well. In this case, that would be the div.content. Add a float:left to that, and a width:100% to make it stretch the width of div#main, and you'll get the desired behavior - the tab cards will be immediately below the tabs themselves.

(This is one reason, by the way, that the "Float Nearly Everything" strategy works as well as it does - it can still use clear in a sane way despite massively overusing float.)

Xanthir  2009-04-20 21:35:10
Thanks. I was having a similar issue and this fixed the issue exactly.
Matt  2009-04-28 03:20:13
A: 

Re:

EDIT A while back when I began using the jQuery UI, the CSS that came with the download was causing my calenders to render at 150% the size that I expected them to. Through their site, I had to change the font sizes and padding to the CSS and then re-download it all. If the spacing is off, it sounds like there may be some padding-left applied somewhere.

I had that same problem initially, but changing the ui.tabs.css like below worked:

.ui-tabs { padding: .2em; zoom: 1; font-size: 80% !important; }

 2009-07-17 20:57:56

related questions

IE7 HTML/CSS margin-bottom bug.
IE7: header above menu
How to create an all browser-compatible hanging indent style in CSS in a span
How can you customize the numbers in an ordered list?
style.display not working in Firefox, Opera, Safari - IE7 OK
Best WYSIWYG CSS editor?
How important is W3C XHTML/CSS validation when finalizing work?
Solve the IE select overlap bug
IE8 overflow:auto with max-height
Autosizing Textarea
What is the best way to create rounded corners using CSS?
FF3 WinXP != FF3 Ubuntu - why?
Is there a business reason for striving for pure CSS layout?
How to set up a CSS switcher in ASP.NET
Setting a div's height in HTML with CSS
Wrapping lists into columns
CSS Background Color in Javascript
How can I make the browser see CSS and Javascript changes?
What sites offer free, quality web site design templates?
Can you recommend a good CSS online resource or book?
Html CSS Editor
In HTML, how to word-break on a dash?
Detecting font in JavaScript
How do you test layout design across multiple browsers/OSs?
Why doesn't the percentage width child in absolutely positioned parent work in IE7?