All browsers have bugs. Good web development does not merely require writing standards compliant code but also writing around the shortcomings of the popular user agents and browsers. Below are some technical notes documenting browser bugs, workarounds and other web development and authoring techniques.
Right positioning in Internet Explorer
Most of the pages at DZR (like this one, using the "Dark" stylesheet)
have a fixed-width right column and a fluid width left column. We came
across an interesting Internet Explorer problem when designing this
layout. The original code set the left column using absolute positioning
with values set for top, left and
right. However, that didn't work in IE5/Mac (although it did work in
all the other CSS compliant
browsers). Our second attempt used absolute positioning with values only
for top and left, and instead set
margin-right so that the text didn't overflow the right
column. That fixed the IE5/Mac problem, and worked in Opera and
Mozilla/NS6, but caused IE6/Win to display the page just like IE5/Mac
had originally! Eventually we developed a workaround, which is
documented in this test case
(view test case source for full documentation).
Updated! (1st May 2002) The IE5.0/Win fix of 29th January 2002 broke in IE5.x/Mac. A new workaround has been added.
Changing between preferred and alternate stylesheets with javascript
We like designing alternate stylesheets for some of our
pages. Unfortunately, Mozilla/NS6 is the only browser which provides a
built-in mechanism for the user to select them. Fortunately, it is easy
to change stylesheets with javascript. However, most of the javascript
code recommended at various sites uses the
document.getElementsByTagName('link') method to enable and
disable named stylesheets, and this has an important shortcoming. A
preferred or alternate stylesheet can consist both of linked external
stylesheets and embedded stylesheets (the <style>
element has a title attribute). The recommended method
works only for linked external stylesheets and not embedded ones. The
document.styleSheets object is part of the W3C DOM and using that to
change stylesheets does not meet with the problems of the former
method. This is documented in a test
case (again, view the test case source for further details).
Borders and background colours in positioned elements in Opera 6
We were saddened to discover a bug that appears to have been introduced in Opera 6 (or at least in the Windows version). We don't have a workaround yet, and actually it looks like there might not be one. The bug does not appear to be present in Opera 5.
Basically, Opera 6 seems to make a complete mess of boxes which are positioned but don't have an explicit width. The text is positioned correctly but borders and background fills are misplaced. The following test case illustrates the problem. Alas, there isn't a workaround as yet to also illustrate. This problem can be seen in the Opera 6 screenshot on the Power of CSS demo page.
IE/Win 5.5 and 6: Text overspilling left edge of box
Whilst implementing the graphic design in CSS for our client Commtag, we came across a bizarre IE bug that took quite some pinning down. One block-level element, the footer of each page, was apparently positioned correctly - its borders and background colour were exactly where we expected them to be - but its text was wildly displaced to the left, outside the left edge of the element's box, and, indeed, outside the left of the browser's viewport. A simplified version of the problem can be seen in this screenshot.
It transpires that this bug is an obscure variant on the recently (at
the current time of writing) discovered Magik
Creeping Text bug, documented by Big
John. In this particular case, a block-level element has its text
erroneously displaced to the left, overspilling its box, if it is
preceded by another block-level element with an explicit
margin-right and padding-bottom which itself
contains more than one further block-level elements.
A workaround is to set a border-bottom on the preceding
block-level element (test
case; screenshot). Even more
bizarrely, the problem is not triggered if the very last child element
of the preceding block-level element is a table (test case; screenshot).
Copyright © 2001, 2002 Darren
BriertonLast modified: Thu Oct 10 06:28:41 BST 2002
webmaster@dzr-web.com