Toolbar 2: IE/Win-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;
div#toolbar span.l1text {
    position: absolute;
    bottom: -2px;       /* Set position for IE/Win */
    right: 0;
    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;

A quick glance shows that the toolbar now looks fine with IE on Windows and the Mac.

What makes this change only affect IE is the way the we define the selector for the rule. Internet Explorer for Windows does not recognize CSS2 immediate descendant selectors, such as html>body (body is always a direct descendant of html.) Other browsers, including IE/Mac recognize these selectors, so we set the IE/Windows value in the main declaration, and then reset it for all non-IE/Win browsers.

What we're doing is using a browser's behavior to our advantage. This can become somewhat fragile since future browsers may, for example, fully implement CSS2 selectors, but hopefully the CSS engine will also have been fixed. Note that browsers which are fully compliant (both in parsing the CSS code and in applying the rules) should always be able to read the style sheet.

There is another bug which causes IE to stop reading code in a particular rule. IE 5 and earlier on Windows will not be able to recognize escaped characters in declarations. The most common application of this is:

selector {
    property: "value for Windows IE 5 and below";
    voice-family: "\"}\"";
    voice-family: inherit;
    property: "value for other browsers";

The way this works is that older IE on Windows will think that the } is not part of the voice-family declaration, and will ignore all the other declarations in the rule, but keeping the first declaration of the property. Other browsers, however, will reset voice-family to the default value (inherited from the parent) and reset the property to the value they should use.

We do not use this method, however, since we need the different bottom to be applied to IE6 on Windows. Another method is to exploit an IE bug:

* html selector {
    property: "Value for IE";

The bug is that since html is the top-most element, nothing should match above html. However, IE's bug is that it does indeed match the wildcard. Unfortunately for our case, IE/Mac is affected by this bug, so we can't use it either.

Looking back at our last results, a closer examination of IE on Windows shows a problem:

There's one pixel of the div's bottom border which is exposed on the right. What would probably fix is is to set a right position of -1px on the inner span, using the same technique as above.

Since we're pretty sure we have IE under control, let's take a look at Opera. Version 7 on Windows looks fine, but Version 6 doesn't:

Opera isn't correctly positioning the inner span, and the vertical bar extends down way too far (past the footer); let's try to fix the horizontal position first. What we can try is using relative positioning for the inner span instead of absolute. However, we'll also need to adjust the text-align for the outer div, to make sure the span is at the right.

Let's try changing the position.

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

 Search | Directories | Reference Tools