11 Not working in IE5.5

I see no light blue shaded lines in IE5.5. All white background except for the three selected lines. Is this a problem with IE5.5 or is it just me.

posted at 11:24 am on March 5, 2004 by Idiot using IE

12 CSS 2, no script, IE 6 bugs

This CSS does the trick. But not in IE 6 that a bummer.

posted at 11:43 am on March 5, 2004 by Sjors

13 Sorry

Does not make any sense. Sorry. Please ignore.

posted at 11:45 am on March 5, 2004 by Sjors

14 The Weakerthans!!

I just had to comment on The Weakerthans and the great “Plea from a Cat Named Virtue” being on that list — that band is awesome.

oh, and cool technique, too!

posted at 11:54 am on March 5, 2004 by Jason

15 Reprazent

Every song by a Canadian artist… woot woot.

posted at 12:09 pm on March 5, 2004 by Canajun

16 Zebra Tables == Greenbar

These alternating stripes have their origin the the lineprinter paper from the 1970s. We called it “greenbar”.

posted at 03:33 pm on March 5, 2004 by Anthony Starks

17 Further customization through JS + CSS

Although I’ve used a similar method in the past, I would suggest one modification: don’t set the background color in the script. Just use the script to apply the even/odd classes so you can keep the styling in the stylesheet. That makes it cleaner to work with, and it’s much easier to add extra styling (borders, fonts, etc.).

Then, instead of checking for the existence of a previous class, you just add a class to the element:

node.className += “ even”;

(Notice the space before the class name so you don’t end up with “fooeven” when the original class name was “foo”.)

I think handing the styling control back to CSS and just automating the assignment of classes makes this solution better suited for web designers who don’t want to muddle with the JavaScript.

posted at 06:00 pm on March 5, 2004 by David S

18 Using David S's advice

Putting that className advice condenses stripe to a five line function.

I’ve posted redo of the example page at
http://davious.org/onepagers/anewstripe.html

I also agree the row classing belongs in the hands on a dynamic markup templating system.

posted at 09:58 pm on March 5, 2004 by Dave Anderson

19 CSS hover

// On a site I made, I was displaying links to, and info about, a handful of
// MP3s, and opted to use an iTunes style layout. I found it nice to add this
// bit. Each cell is a link to its respective file, and when hovered, it
// displays the iTunes selected color. Unfortunately, only Gecko renders it
// properly. This is how it was acheived:

td a { color: #000000 !important; background: transparent; display: block; text-decoration: none; margin: 0px 0px 0px -1px; border-left: 1px solid #D9D9D9; border-right: 1px solid #D9D9D9;
}
tr.odd td a { color: inherit; background: #ECF2FE;
}
tr.even td a { color: inherit; background: #FFFFFD;
}
tr:hover td a { color: #FFFFFF !important; background: #3D80DF !important; border-color: #346DBE;
}

posted at 10:24 pm on March 5, 2004 by gnosis

20 Beware the Pentium

This technique is good for short to moderately long lists. Designers should beware that slower machines (Pentiums are still out there – or old Macs too) will hit this code and slowly churn through the table rows.

Thanks for the useful code!

posted at 10:56 pm on March 5, 2004 by Randy Peterman