Desired maintenance for Perlmonks CSS

[dfaure]

As xdg and several others stated here (the node reputation speaks for itself), I'd like to have things happening concerning CSS at Perlmonks.

I fully agree that this kind of task is quite long and not trivial but IMHO, This could really makes Perlmonks better for the end user as for the devils. In the interim, I would love to have more id/class specified to avoid tricky CSS as you can find in my current one below.

Precisely, I'll need class/id for table elements involved in thread replies categorizing the global reply header, and the different parts of each replies. I managed to make it run partially under Firefox or IE6 with the code below (unable to adjust main reply backgound-color):

#monkbar { display: none; }

h3.other, h3.superdoc, h3.categorized_answer, h3.categorized_question 
+{
  font-size: 200%;
  font-style: italic;
  font-family: Georgia, serif;
  padding: 10px;
}
pre, tt {
  font-family: "Bitstream Vera Sans Mono", monospace;
}

.topnavmenu, #replies_table font { font-size: 100%; }

textarea {
  width: 100%;
  height: 25em;
}

body {
  color:            black;
  background-color: rgb(240,240,240); }

a { color: rgb(39,78,144); }
a:link { text-decoration: underline; }
a:hover, a.titlebar:hover { text-decoration: underline; }
a:visited, a.titlebar:visited { text-decoration: none; }

td { color: black; }
tr.titlebar { background-color: rgb(100,135,220); }
td.titlebar { color: white; }

tr.section_title {
  color:            white;
  background-color: rgb(0,51,153); }
td.section_title {
  color:            white;
  background-color: rgb(0,51,153); }
tr.post_head, tr.highlight {
  background-color: /*rgb(140,170,230)*/ rgb(212,208,200); }

.code {
  border:  1px solid #666;
  padding: 10px;
  color:            rgb(39,78,144);
  background-color: white;
  display: block;
}

table.nodelet_container { background-color: rgb(0,51,153); }
tbody.nodelet th, th.nodehead {
  color:             white;
  background-color:  rgb(0,51,153);
/*  color: rgb(39,78,144);
  background-color: rgb(140,170,230);*/ }
tbody.nodelet td, td.nodebody {
  color:            rgb(39,78,144);
  background-color: rgb(240,240,240); }

table#replies_table {
  background-color: /*rgb(240,240,240)*/transparent;
}
table#reply_tables th a {
  background-color: rgb(0,51,153); }
table#replies_table th font {
  color:            rgb(253,160,91);
}
table#replies_table td[colspan="2"] {
  background-color: rgb(212,208,200);
}
table#replies_table td {
  background-color: transparent;
}

#approval_nodelet input[type="text"] {
 background-color: rgb(255,200,200);
}

a[href="http://pair.com/"] { display: none; }

You may refer to the quite amazing Zen Garden to see what could be done with CSS.

[demerphq]

To the best of my knowledge there is no single place that stores all of the currently used CSS class'es.

Producing such a list as an SDC node would probably be the best place to start a project like this.

[Anonymous Monk]

textarea {
  width: 100%;
  height: 25em;
}

This is not cross-browser friendly (one amongst many parts of your CSS that is so)

[synistar]

Which browsers are you refering to? Safari? Mozilla? Lynx? A cellphone?

The issues invoved with creating a truly cross-browser compatible CSS layout are pretty hairy. But they are not insurmountable. It just takes a bunch of patience and testing.

I am all for a rewrite to do this. However if the HTML is scattered throughout the code there are larger issues to contend with. Maybe cleaning the codebase up first to get all the presentational markup together into one place and taking a more template oriented approach would be the logical first step here? I have never looked at the code so please correct me if this has already been done.