Toolbar 4: Opera-Only 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;
head:first-child+body div#toolbar span.l1text {
    position: absolute;
    bottom: -1px;

Both Opera 7 and 6 now look fine, as do the other browsers. We applied some rules which were specific to Opera by doing the following:

  1. Rules having selectors with descendents (html>body) do not work with IE on Windows, so we're setting values for all other browsers, Opera included. For the div, that means we're setting text-align to right.
  2. IE on Windows and Opera before version 7 does not correctly handle :first-child, so by setting text-align back to left in this rule, we make sure that only Opera (at least version 6 and earlier) will align text to the right.

We used the same filtering for the span so Opera 6 and lower are the only browsers which will see the relative positioning, and only IE/Win and Opera 6 will see the changed bottom position.

Since we saw that a text-align of right probably would have caused problems even without the span having relative positioning, we also set the default in our div to left.

Next we check Opera 5:

Looks as if we need to tell Opera 5 that the span needs to be even one more pixel further down. However, looking at Konqueror for Unix:

the opposite is true; the span needs to move up one pixel (we won't worry about the extra space on the right). We make a change for Opera 5 and Konqueror.

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

 Search | Directories | Reference Tools