page 6 of 6 CSS Right Justify

The scope of this section is limited by the number of different browsers and versions of those browsers available for testing. My personal collection is limited. I test on Netscape versions 7+, Mozilla versions 1.7 +, MS IE versions 5.0+ IE 5.5, IE 6, Opera Version 7.21, and Konqueror 3.2.3. Time to acquire and test other browsers and versions isn't justified for my purposes. And, I don't have a Mac, but welcome feedback from anyone who has different browsers and comments from anyone else.

  Konqueror and KHTML

The example pages had hiden code...well not actually hidden...code that was not commented on in the text. This code was needed to make the examples work in IE, Opera, or Konqueror. The code for IE was covered in some detail in Handling IE, and the comments are repeated along with additional notes below. There are also notes below covering my experiences with Opera, and this should be sufficient given Opera's limited use. The Konqueror code, which has not been discussed, needs more coverage as it represents a class of browsers.

Konqueror use the KHTML engine just as Mozilla, Netscape, and FireFox use the Gecko engine, and other browers have their rendering engines. I mention this because just as one can expect the browsers based on the Gecko engine to perform similarly that is reasonable to expect browsers based on the KHTML engine to perform similarly. This includes the popular Safari browser on Apple's Mac.

When floating an inline object like the images in Floating the Element Right, the image had to be raised a line for IE and Gecko browsers. This is not needed in Konqueror or Opera. They put the inline object on the line and not below it. The following code was used to adjust for this.

<script type="text/javascript">
    if (browser.isOpera || browser.isKHTML) {
        document.write(
            '<style type="text/css">.float-class {margin-top: 0;}<\/style>'
        );
    }
</script>

For details on the browser.isOpera || browser.isKHTML test, see the JavaScript How-to Browser Sniffing

That code simply overrides the top margin value used for other browsers.

Konqueror doesn't recognized the IE proprietary position-static or handle auto to properly position the absolute element vertically. Since this element is always on the last line (for headings it is also on the first line: the only line) it can be positioned from the bottom, which Konqueror handles correctly unlike IE. The following code sets the bottom value to 1px. Sometimes 2 or 3px was better. It depends on the positioned element's size and font size.

<script type="text/javascript">
    if (browser.isKHTML)
        document.write(
            '<style type="text/css">.right-elem{bottom: 1px;}<\/style>'
        );
</script">

  Issues with MS IE

There are several issues and work-a-rounds needed for IE.

• IE version 5.0 and 5.5:
  • In the JavaScript calculation, the parentNode.clientWidth in IE 5.0 is 0 and parentNode.scrollWidth needs to be used instead. This is an easy test.
  • The JavaScript calculation shown in the introduction to positioning has special code for IE 5.x, IE 5.x doesn't always change the positioning context when the parent is positioned relative. To test if the positioning context is correct compare for equality the elem.parentNode and the elem.offsetParent. If they are unequal, this calculation is used:

    (elem.parentNode.offsetLeft + elem.parentNode.scrollWidth) -
    	(elem.offsetLeft + elem.offsetWidth)
    

    However, when the parentNode, which is position relative, is a list item (LI) the context is correct even when the test fails.
  • The CSS expression shown in Handling IE may have to be changed to fit each specific application taking into account the issue of offsetParent. A constant value may need to be included in the expression for fine adjustment.
  • Using JavaScript to right justify an element within a list item also moves the bullets accept when the right justified element is an image.
  • In nested lists, the LI needs to have an explicit width set.
  • A floated link, A tag, will not act as an active link. However, a link within another floated element will work. Putting links within a floated span tag worked in all tested browsers.
  • As mentioned earlier, the bottom and right attributes are not measured from the nearest positioned parent. A work-a-round was provided in the Handling IE section
• All versions through IE 6 when using absolute positioning:
  • Use the non-standard position-static value for top or left to have that absolute position be the same as the static position.
  • Also mentioned in Handling IE section, IE only provides the outside width of the parent. This includes borders, but the calculation should not. Borders on the parent element need to be handled manually. That is, hard code a border adjustment equal to the sum of the right and left borders.

  Opera 7.21

• When the parent element is floated, Opera doesn't use it as the positioning reference for the right. This has an easy cross browser fix: put the element inside a floated div or span.
• Opera does handle a non-floated parent correctly.
• When floating an inline element to the right, Opera puts it on the line and the negative top margin is not needed.

  Konqueror 3.2.3

• When floating an inline element to the right, Konqueror puts it on the line and the negative top margin is not needed.
• Konqueror requires an explicit top or bottom value for absolutely positioned elements. This works out if the right justified element is at the end of a single line or the last line in a paragraph. bottom = 0 to 3 px should align the element.