Toolbar 5: Opera 5, Konqueror Position

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 stylesheet (with differences highlighted) now contains:

div#toolbar {
    position: relative;
    width: 100%;
    border: 0 solid #666;
    border-bottom-width: 1px;
    text-align: left;   /* Make sure everyone sees this */
}
html>body div#toolbar { /* For non-IE/Win */
    text-align: right;
}
head:first-child+body div#toolbar {     /* Opera, IE/Win won't see */
    text-align: left;
}
div#toolbar span.l1text {
    position: absolute;
    bottom: -2px;       /* Set position for IE/Win */
    right: -1px;
    background: white;
    border: 0 solid #666;
    border-width: 1px 0 0 5px;
    padding-left: 0.3em;
}
html>body div#toolbar span.l1text {  /* For non-IE/Win */
    position: relative;
    right: 0;
    bottom: -3px;
}
html>body div#toolbar span.l1text {
    b\ottom: -2px;    /* Hide from Opera 5 */
}
head:first-child+body div#toolbar span.l1text {
    position: absolute;
    bottom: 0;
    b\ottom: -1px;    /* Hide from Konqueror */
}

We made this change apply only to Opera 5, since the position for Opera 6 would be too low.

The method used here takes advantage of the fact that Opera 5 can't parse properties with escape characters. Note, however, that the \ must not preceed a digit or the letters a through f (valid hexadecimal digits). Also, the Opera 5-specific change was made in a completely different rule, since using the backslash in a property name causes the entire rule to not be read by Opera 5.

For Konqueror, we knew the bottom needed to be moved up one pixel. As with Opera 5, Konqueror does not understand declarations which have a \ in them. We know that Konqueror understands all of the selectors in our style sheet, and only ignores single declarations with \ in them (rather than whole rules, as Opera 5) so we maniuplate the bottom position in the last rule.

Admittedly a lot of exprimentation went into developing the style sheet above, but once done, it becomes much easier to use the toolbar. However, because of the styling we had to do for multiple browsers, the toolbar is somewhat fragile. For example, one can't just put an image on the left side of the toolbar:

A better way to place an image is to give it a negative bottom margin, but beware that IE 5/Mac will then position the image too low, so IE 5/Mac must have a bottom margin of 0 (but it will end up sitting right on top of the horizontal line anyway.) In order to make this change only for IE/Mac, you need to have the image wrapped in an element which has an attribute. In our case, this is already true since the image is also a link, and therefore wrapped with an a. Giving our image the attribute id="toplogo", we could use something like:

img#toplogo {
    border: 0;
    margin-bottom: -1.2em;
}
a>img#toplogo {
    margin: 0;
}
a[href] img#toplogo {
    margin-bottom: -1.2em;
}

This works since IE 5/Mac can parse direct descendent selectors, but not selectors with attributes. Another warning of IE 5/Mac is that there will be space below the toolbar, so if you wish to have the content which follows to be right against the toolbar, you need to specify a negative top margin of 1.15em (again, making it specific to IE/Mac, and making sure it's wrapped with a container which has an attribute.)

As an example of one simple change we can make in the way we use the toolbar, the UW Home Page has a different background color, so the lines and text need to also be colored differently.

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

 Search | Directories | Reference Tools