Even and Odd Rules

@HookedOnWinterJan 18.2007

Hey anyone who reads this.
Ok, so I’m trying to do something with CSS to save me even more time down the line. On a page I’m working on, there are a series of events. I want each event line to have different color, alternating every line.. so Gray, Grayer, Gray, Grayer. Now this would be easy with something like class=”even” and then class=”odd”, but the problem comes in when I need to insert one event in the middle. I’d have to redo all the evens and odds to match.

So, I googled CSS Even Odd.
I find this: ~~[URL=”http://www.w3.org/Style/Examples/007/evenodd.html”]~~http://www.w3.org/Style/Examples/007/evenodd.html[/URL]

Check out this page in firefox and then in IE:~~[URL=”http://www.coloradocollege.edu/giving/1874/final/events.htm”]~~http://www.coloradocollege.edu/giving/1874/final/events.htm[/URL]

Any ideas?

to post a comment

CSS

11 Comments(s) _↴

@HookedOnWinterauthorJan 18.2007 — #It stopped working. So never mind on the checking it out part for now. But, anyone have any ideas on how to accomplish this task?

@CentauriJan 18.2007 — #Is this what you were thinking of ?

Cheers

Graeme

@HookedOnWinterauthorJan 18.2007 — #Yes, and I've found that. The problem is what happens when you have this, for example:

Event 1

Event 2

Event 3

...

Event 51

Event 51

And you want to insert a new event at #23. Then you have to go back and redo all the classes from 24+.

@CentauriJan 19.2007 — #The ALA article I linked to above has a javascript routine to walk through the table and apply background colours, so that manual class definitions are not required - have you tried that script ?

Cheers

Graeme

@BonRougeJan 19.2007 — #Does this help? http://bonrouge.com/demos/altRowList.htm

[code=html]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 <html>
 <head>
 <title>alternate coloured rows (javascript)</title>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <style type="text/css">
 * {
 margin:0;
 padding:0;
 }
 body {
 background-color:white;
 }
 a {
 color:white;
 }
 .odd {
 background-color:red;
 }
 .even {
 background-color:blue;
 }
 </style>
 <script type="text/javascript">
 function altRow(list) {
 var items=document.getElementById(list).getElementsByTagName('li');
 for (i=0; i<items.length; i++) {
 if ((i%2)?false:true) {
 items[i].className+=" odd";
 }
 else {
 items[i].className+=" even";
 }
 }
 }
 window.onload=function() {altRow('list');};
 </script>
 </head>
 <body>
 <ol id="list">
 <li><a href="#n">One</a></li>
 <li><a href="#n">Two</a></li>
 <li><a href="#n">Three</a></li>
 <li><a href="#n">Four</a></li>
 <li><a href="#n">Five</a></li>
 </ol>
 </body>
 </html>
 
 [/code]

@HookedOnWinterauthorJan 22.2007 — #The ALA article I linked to above has a javascript routine to walk through the table and apply background colours, so that manual class definitions are not required - have you tried that script ?

Cheers

Graeme[/QUOTE]

worked great! thank you for your help

pj

@WebJoelJan 23.2007 — #Now that this has been satisfactorally answered, -may I 'hijack' this thread instead of starting a new one as it pertains to the aforeposted code?

--I was playing around with this code and I am seeing something of an curious anomoly that I can't explain to myself. First, here is the above code with a few modifications:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>alternate coloured rows (javascript)</title>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<style type="text/css">

* {margin:0; padding:0;}

body { background-color:white;}

.odd {background-color:#ececec;}

.even {background-color:#cfcfcf;}

#list {width:390px; border:1px solid red; margin:0 auto; text-align:center;}

#list li {margin:8px 0 8px 0; display:inline; padding:5px 15px 5px 15px; border:1px solid black;}

#list li a {color:black; font-weight:600; line-height:2.7em; width:160px; text-align:center; text-decoration:none;}

#list li a:hover {color:red; font-weight:600;}

</style>

<script type="text/javascript">

function altRow(list)

{var items=document.getElementById(list).getElementsByTagName('li'); for (i=0; i<items.length; i++)

{if ((i%2)?false:true)

{items[i].className+=" odd";} else

{items[i].className+=" even";}

}

} window.onload=function() {altRow('list');};

</script>

</head>

<body>

<[B]ol[/B] id="list">

<li><a href="#n">One</a></li>

<li><a href="#n">Two</a></li>

<li><a href="#n">Three</a></li>

<li><a href="#n">Four</a></li>

<li><a href="#n">Five</a></li>

</[B]ol[/B]>

</body>

</html> [/QUOTE] Works great btw, & thank you very much. I'm archiving this, too! ?

But just for giggles, change the closing "</ol>" to "</[B]u[/B]l>" and view the result in IE. It seems to 'crop-off' the [I]last[/I] [B]#list li a [/B] (the [B]FIVE[/B]). You could add "style="padding-right:6px;" (or thereabouts) to the [I]last[/I] <li> to adjust this, -but that is stupid. There is no changes at all with Firefox and this stupid 'add 6px;' DOES change Firefox's view of "FIVE".

Now, most tags are 'optional' anyway, end tags are kluge if there is nothing more to come, -so why would a [I]non-parity closing tag[/I] do this? Next, change the "[B]</ul>[/B]" to "[B]</all>[/B]" or "[B]</everything>[/B]" or any word or alpha-numeric that you want, -and this returns to displaying correctly in IE... IE seems to trip if you use "<ol>" to open the group and you then use "</ul>" to close the group (and vice-versa)...

It seems that the [I]wrong-matching tag[/I] is [B]worse[/B] than using a [I]non-existant, ficticious & apocrophillic[/I] closing tag. ? ?

-I expect to be told about IE being junk, old, buggy, as my answer, etc. Save it, --you're singing to the choirmaster. ? What I want to know WHY it does this...

@BonRougeJan 23.2007 — #With the [url=http://www.google.co.jp/url?sa=t&ct=res&cd=1&url=http%3A%2F%2Fwww.microsoft.com%2Fdownloads%2Fdetails.aspx%3FFamilyID%3De59c3964-672d-4511-bb3e-2d5e1db91038%26displaylang%3Den&ei=rI61RbOdH4_ksAKCttRH&usg=__au5WSel_AYBsSlAd0yFuc3QgsXY=&sig2=CMoPGoXF0qIpRhejjEcvuA]IE Developer Toolbar[/url] you can see what the browser sees. If you put a closing 'ul' tag there, the browser sees an opening 'ul' tag. If you put a fictitious closing 'all' tag there, that's what the browser sees - a closing 'all' tag. Of course, I don't know why that happens, but it explains it a little, I think.

@WebJoelJan 23.2007 — #With the [url=http://www.google.co.jp/url?sa=t&ct=res&cd=1&url=http%3A%2F%2Fwww.microsoft.com%2Fdownloads%2Fdetails.aspx%3FFamilyID%3De59c3964-672d-4511-bb3e-2d5e1db91038%26displaylang%3Den&ei=rI61RbOdH4_ksAKCttRH&usg=__au5WSel_AYBsSlAd0yFuc3QgsXY=&sig2=CMoPGoXF0qIpRhejjEcvuA]IE Developer Toolbar[/url] you can see what the browser sees. If you put a closing 'ul' tag there, the browser sees an opening 'ul' tag. If you put a fictitious closing 'all' tag there, that's what the browser sees - a closing 'all' tag. Of course, I don't know why that happens, but it explains it a little, I think.[/QUOTE] Worth investigating because I have done unordered lists before and have the LAST <li> get 'cropped off' just like here, -and there was no (to my knowledge and validator returned no error/s) un-matched closing tag... ?

When Iwas going to school for Internet Publishing, my professor said something to the effect of "...IE reads "from [I]opening tag [/I]to [I]opening tag[/I]" ' and thus, often display as you intended, but not correctly. Compliant browser read from [I]opening tag[/I] to (expected) [I]closing tag, and will display incorrectly if this is missing (which is the 'correct behaviour)...[/I] hmm..

Thanks for the link, -will read.

@CharlesJan 23.2007 — #Actually, it sort of makes sense for browsers to ignore closing tags as some of them are optional.

@HookedOnWinterauthorJan 23.2007 — #that is really weird!

Maybe IE reads from closing tag back to opening tag, forces some space-time continuum gap, and the flux capacitator eats the last <li>? or not..

Also in #CSS _↴

images overlapping one another in firefox Help me with this table inheritance question...scrollbar style

Success!

Help @HookedOnWinter spread the word by sharing this article on Twitter...

Tweet This

Even and Odd Rules

11 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

Even and Odd Rules

11 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

11 Comments(s) _↴

Also in #CSS _↴