Toolbar 6: Change Colors

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

By using the same toolbar style sheet, if we add the following rules locally to the page:

div#toolbar {
    border-color: #ccc
div#toolbar span.l1text {
    border-color: #ccc;
    background-color: #334;
.l1text {
    color: #ccc;
    font-weight: bold
.l1text a:link {
    color: #8888cc
.l1text a:visited {
    color: #8888aa

the toolbar can be used against a dark background:

 Search | Directories | Reference Tools

As on the UW Home Page, the text was changed to be bold so it would stand out better against the dark background.

Notice that the only changes which were made (other than making the text bold) were changing the colors; all the other rules and declarations stayed the same. In fact, we could further reduce the text by adding to the toolbar.css span rule:

border: inherit;

This CSS2 statement would eliminate the border-color declaration in the span of not only the original stylesheet, but the one used for dark colors. However, Internet Explorer does not support inheriting of border colors (or background colors.)

Another approach for the complete toolbar is to simplify the markup to:

<div id="toolbar" class="l1text">
    <a href="/home/search.html">Search</a>
    <a href="/home/directories.html">Directories</a>
    <a href="">Reference

and style the <a></a> links themselves as containers. The vertical bars could be added with the CSS2 :before pseudo-element (and not put before the first with the :first-child pseudo-class, as well as creating the thicker left line). This approach would not work in our case since we need one more container so we can position it to cover up the bottom line of the outermost <div></div> (inline containers can't be positioned). Also, Internet Explorer does not support :before or :first-child.

A variant of this approach would be to structure the items as an unordered list, making the list elements inline so they appear next to each other. However, the same limitations apply as with the simplified markup.