Latest Example of IE6 being FUBAR - This time, CSS

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Assigning a page's stylesheet to a variable or passing it as a
parameter to a function can corrupt styles in IE6.

I have a Terrestrial TV Calculator page which I've linked before, and
for some months have been struggling to publish an updated version in
the face of an onslaught of idiosyncracies and bugs from various
versions of IE.  Recently, I noticed that, only in IE6, wide tables of
the transmission data were not being printed with the correct
font-size, which is set programmatically by adding the style
'printsmall' to the className if the table has more than so many
columns.  The definition of  'printsmall' is as follows:

@media print
.printsmall, .printsmall * { font-size:8pt; }
table.printsmall { border-collapse:collapse; border:1px solid; }
.printsmall td, .printsmall th
     { padding-left:0.1em; padding-right:0.1em; }

In the Print Preview, the tables have the correct collapsed borders,
but the font-size appears to be 10pt, resulting in the last column of
the table being lost.  Thus not all the 'printsmall' style is
corrupted, apparently just the font-size.

By binary chopping the functionality of the page, I eventually nailed
it down to the nested pair of JavaScript functions appended that
search for given styles in the document's stylesheets.  Note that this
functionality is READONLY, it makes no attempt to alter any style that
it finds, but merely returns an array of styles whose selectors match
strings or regular expressions passed in as parameters.

By commenting out still further, I finally nailed it down to the
passing of the parameter ...
... in the line third from end ...
    results = results.concat( _fs(targets, sheets[sheet]) );

The corruption does not occur if:

1)    The entire outer function's calling of the inner is replaced with
a semi-colon;

2)    The call's parameter ...
... is subsituted as follows  ...
    results = results.concat( _fs(targets, sheet) );
(and the inner function's body is adjusted to return an empty or even
a non-empty array)

The corruption occurs if:

3)    The call to the inner function is replaced with ...
    var thisSh = sheets[sheet];

4)    The inner function's body is adjusted to return an empty or even a
non-empty array, but the parameter ...
... is still passed to it.

5)    IE's documented 'item()' method is used to access the stylesheet
as follows ...
    _fs( targets, sheets.item ? sheets.item(sheet) : sheets[sheet] )

6)    The inner function and its parameters and variables are renamed to
remove any possible ambiguities.

7)    The inner function is moved outside the outer one

Seemingly, however syntactically phrased, the passive act of passing a
stylesheet as a parameter, or even just assigning it to a variable in
the outer function, can cause corruption!

Another two days wasted courtesy of MS.  GRRRRR!

//    Style rule finder
//    WARNING: Can break CSS in IE6 without obvious error!

function findStyles( selectors, styleSheets )
    function _fs( targets, sheet )
        var    results    = [];
            var rules = sheet.cssRules ? sheet.cssRules : sheet.rules
? sheet.rules : [];
            for( var rule = 0; rule < rules.length; rule++ )
                if( rules[rule].selectorText )
                    for( var target = 0; target < targets.length;
target++ )
                        if( rules[rule].selectorText.match(typeof
targets[target] == "string" ? new RegExp(targets[target]) :
targets[target]) )
                            results.push( rules[rule] );
                    results = results.concat( _fs(targets,
rules[rule]) );
        return results;
    var    targets    = selectors ? (selectors instanceof Array ? selectors
: [selectors]) : [];
    var    sheets    = styleSheets ? (styleSheets instanceof Array ?
styleSheets : [styleSheets]) : document.styleSheets ?
document.styleSheets : [];
    var    results    = [];
    if( targets.length && sheets.length )
        for( var sheet = 0; sheet < sheets.length; sheet++ )
            results = results.concat( _fs(targets, sheets[sheet]) );
    return results;
Please always reply to ng as the email in this post's
header does not exist.  Or use a contact address at:

Site Timeline