CSS Forum

**Mr. B** · 12:09 PM

[EDIT] I've made some progress with the alignment and taken some of LadynRed's suggestions which are visible on the links and their source. I'll post again when I reach another empass tonight

[/EDIT]

I found a working example of a tabbed box in CSS which I am trying to adapt to my website, viewable at http://mrbsdomain.com/tab1.html (inline CSS)

I've been working on this for a couple hours and I've resorted to just copying the code to mine and it still isn't working. I'm hoping another set of eyes will see something I'm missing.

The relevant code...

Code:

...
<body id="home">
<ul id="nav"><li id="tab-home"><a href="http://mrbsdomain.com/index.php">Home</a></li>
<li id="tab-portfolio"><a href="http://mrbsdomain.com/portfolio.php">Portfolio</a></li>
<li id="tab-gallery"><a href="http://mrbsdomain.com/gallery2/main.php">Gallery</a></li>
<li id="tab-vaio"><a href="http://mrbsdomain.com/vaio.php">Vaio</a></li>
<li id="tab-webcam"><a href="http://mrbsdomain.com/webcam.php">Webcam</a></li>
<li id="tab-about"><a href="http://mrbsdomain.com/about.php">About</a></li></ul>
  <!-- CONTENT STARTS HERE -->
  <div id="contentContainer">

http://mrbsdomain.com/index1.php and http://mrbsdomain.com/about.php

The CSS

Code:

...
#nav {
    border-bottom: 1px solid #fff;
    text-align: right;
    margin: 0;
    padding: 0px;
    z-index: 1;
}

#nav li {
    display: inline;
    overflow: hidden;
    list-style-type: none;
}

#nav a {
    float: left;
    color: #929395;
    text-decoration: none;
    font-size: 9pt;
    margin: 0 0 0 4px;
    padding: 6px 13px 8px 13px;
    border: 1px solid #1C1D1F;
    background: #1C1D1F url(http://www.mrbsdomain.com/images/tab-off.gif) repeat-x top left;
}

body#home #tab-home a,
body#portfolio #tab-portfolio a,
body#gallery #tab-gallery a,
body#vaio #tab-vaio a,
body#webcam #tab-webcam a,
body#about #tab-about a  {
    color: #222;
    background: #666 /* url(http://www.mrbsdomain.com/images/tab-on.gif) repeat-x top left */;
    border-color: #fff;
    border-bottom: 1px solid #666;
    font-weight: bold;
    }

#contentContainer {
    border: solid;
    z-index: 2;
    border-width: 0 1px 1px 1px;
        border-color: #FFFFFF;
    background: #666666;
    text-align: left;
    width: 956px;
    height: auto;
        margin-left: auto;
        margin-right: auto;
    padding: 20px;
    }

http://mrbsdomain.com/style1.css

**chrishirst** · 12-16-2008, 04:13 AM

And are you going to tell us what the problem is?

**LadynRed** · 12-16-2008, 10:43 AM

Ok, the z-index on #nav is useless since it ONLY works on positioned elements.
Your #globalcontainer isn't "containing" it's contents, it's not wide enough - or the contents is spilling over. Putting clear:both on a non-floated container like that is utterly pointless.

Your #nav isn't 'containing' the list items inside it, the ul is only a few pixels high.
You need to at least define a height on the UL or the li elements.

The table for the page title and description are unnecessary, you can do that with divs and proper heading tags.

**Mr. B** · 12:17 PM

After some prodding, I'm nearly there... http://mrbsdomain.com/about.php

[edit]I thought the remaining problem was IE only but it's actually almost universal ( http://browsershots.org/http://mrb.t....com/about.php ) [/edit] The active tab has a 2px bottom border which obscures the top white border which spans the UL and appears to be the top border of the content box. This works in firefox et. al. but in IE, the UL border-bottom is in front of the active tab bottom border. The example I was using does not seem to have this problem.

Relevant CSS

Code:

#nav {
    color: #fff;
    text-align: right;
    width: 100%;
    border-bottom: 1px solid #fff;
    margin: 0;
    padding: 7px 0 9px 0;
}

#nav li {
    display: inline;
    overflow: hidden;
    list-style-type: none;
}

body#home #tab-home a,
body#portfolio #tab-portfolio a,
body#gallery #tab-gallery a,
body#vaio #tab-vaio a,
body#webcam #tab-webcam a,
body#about #tab-about a  {
    color: #222;
    background: #D9D5A3 /* url(http://www.mrbsdomain.com/images/tab-on.gif) repeat-x top left */;
    border: 1px solid #fff;
    border-bottom: 2px solid #D9D5A3;
    font-weight: bold;
    }

#contentContainer {
    border: 1px solid #fff;
    border-top: 0;
        border-color: #FFFFFF;
    background: #D9D5A3;
    text-align: left;
    width: 946px;
    height: auto;
    padding: 20px;
    overflow: hidden;
    }

[edit]
Partially solved with addition of...

position: relative;
z-index: x;

...to content DIV and UL

Aside from some IE issues, border corner rendering differs by browser which is having a slightly adverse effect on the appearance of the border line.
http://browsershots.org/http://mrbsdomain.com/about.php

If there is a way to control this with CSS, I would be appreciative.
[/edit]

[edit]Solved... view the source and see http://mrbsdomain.com/style.css[/edit]