Toolbar 3: Opera relative 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: right;
div#toolbar span.l1text {
    position: relative;
    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 */
    bottom: -1px;
    right: 0;

Opera 6 and Opera 7 on Windows now show:

which is pretty close. It also appears that the size of the span is now limited to the containing div, so the vertical line doesn't go too far down.

Since we made a somewhat major change by changing the span from absolute to relative positioning, we should check all the other browsers. Mozilla, Camino, Safari, and IE/Win look fine, but IE/Mac does not.

IE Mac:

What we need to do is revert to the normal text-indent and absolute positioning on the span. However, these declarations got us much closer with Opera 6. We'll try making Opera 6 have a bottom position which is another pixel lower than it is now (which is 1 pixel down.)

We'll need to make these adjustments Opera-specific.

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

 Search | Directories | Reference Tools