Toolbar 1: First Attempt

1: First Attempt | 2: IE/Win-Only Position | 3: Opera relative Position | 4: Opera-Only Position | 5: Opera 5, Konqueror Position | 6: Change Colors

Our first CSS attempt is:

div#toolbar {
    position: relative;
    width: 100%;
    border: 0 solid #666;
    border-bottom-width: 1px;
div#toolbar span.l1text {
    position: absolute;
    bottom: -1px;
    right: 0;
    background: white;
    border: 0 solid #666;
    border-width: 1px 0 0 5px;
    padding-left: 0.3em;

For the outer div, we declared it to have a position of relative, rather than static (the default). This is so we can use the div as a positioning container for the inner span.

We define the color and style of the border, and declare that we only want a 1-pixel border on the bottom of the div. We also set the width of the object to 100%, to work around an Internet Explorer bug which causes only the bottom line to appear, not the set of links.

For the span, we use absolute positioning, and set it at the far right, as well as down one pixel so we can cover up the bottom border on the containing div. As an aside, it ends up that using a position of float for the inner span would have only worked for Mozilla-based browsers, due to bugs in other browsers.

Just positioning the span isn't enough, since we also need to define the background color so that the div's border will actually be obscured. We then define the span's border to be one pixel on the top and 5 pixels on the left. Finally, we add a little padding to separate the thick vertical line with the links.

Mozilla, Camino, Safari, and IE 5/Mac OS X render the toolbar as:

Which does look right. Looking at Internet Explorer for Windows, we see:

We see that even with the bottom position set to -1px, the bottom border of the outer div is not covered up. Let's see what happens if we move the inner span down one more pixel. We want to be careful that we only make this change for IE on Windows, since IE/Mac, Mozilla, Camino, and Safari look fine.

Let's try making this IE/Win-only position.

The browser you are currently using, with the CSS above, renders the toolbar as:

 Search | Directories | Reference Tools