Even and Odd Rules [Archive] - WebDeveloper.com

Click to See Complete Forum and Search --> : Even and Odd Rules

HookedOnWinter

01-18-2007, 06:31 PM

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: http://www.w3.org/Style/Examples/007/evenodd.html

Check out this page in firefox and then in IE:http://www.coloradocollege.edu/giving/1874/final/events.htm

Any ideas?

HookedOnWinter

01-18-2007, 06:34 PM

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?

Centauri

01-18-2007, 06:48 PM

Is this (http://alistapart.com/articles/zebratables) what you were thinking of ?

Cheers
Graeme

HookedOnWinter

01-18-2007, 06:52 PM

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+.

Centauri

01-18-2007, 08:21 PM

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

BonRouge

01-18-2007, 08:41 PM

Does this help? http://bonrouge.com/demos/altRowList.htm

<!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>

HookedOnWinter

01-22-2007, 04:26 PM

WebJoel

01-22-2007, 07:56 PM

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>
<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> Works great btw, & thank you very much. I'm archiving this, too! :)
But just for giggles, change the closing "</ol>" to "</ul>" and view the result in IE. It seems to 'crop-off' the last #list li a (the FIVE). You could add "style="padding-right:6px;" (or thereabouts) to the last <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 non-parity closing tag do this? Next, change the "</ul>" to "</all>" or "</everything>" 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 wrong-matching tag is worse than using a non-existant, ficticious & apocrophillic closing tag. :confused: :confused:

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

BonRouge

01-22-2007, 11:29 PM

WebJoel

01-23-2007, 09:04 AM

With the IE Developer Toolbar (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) 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. 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... :confused:
When Iwas going to school for Internet Publishing, my professor said something to the effect of "...IE reads "from opening tag to opening tag" ' and thus, often display as you intended, but not correctly. Compliant browser read from opening tag to (expected) closing tag, and will display incorrectly if this is missing (which is the 'correct behaviour)... hmm..

Thanks for the link, -will read.

Charles

01-23-2007, 09:52 AM

Actually, it sort of makes sense for browsers to ignore closing tags as some of them are optional.

HookedOnWinter

01-23-2007, 01:13 PM

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..