You’re doing such a tremendous job of keeping me entertained across this thread and others.
As somebody who takes pride in learning and writing valid, semantically correct XHTML and CSS by hand – after all, it’s the blind editing of the Dreamweavers and Frontpages of the world that only help to get muppets like you online – I find it to be massively offensive that you wade in here with rarely a useful comment to make chastising all of us for our opinions and practices when you don’t even bother to TRY and do things properly yourself!
If you are even remotely serious about your role as a web designer/developer/programmer/whatever then valid, clean markup is essential, Doctypes are a requirement not an option, IE is truly awful but must be catered for, the list goes on.
Come back and moan at us for being ridiculous for using semantics or wishing IE dea when you start writing XHTML 1.0 Strict – it’s honestly not that difficult.
Copy & paste the code below to embed this comment.
darkcryst
Chris – I guess that was my point about the alternative method.
While I think that it is a tad pointless and inelegant to use this method as its shown in this example, it could be a valuable springboard.
Exactly what AListApart should be really, not how-to’s. So.. you know, great.
Shakey – wow… venom there. I agree with the general sentiment of “huh?” reguarding Dante, and you are right, XHTML and CSS isn’t that hard, he just choses not to use it right.
As you have painstakingly told me.
1. I have never used FrontPage or Dreamweaver or any soft of WYSIWYG editor to create websites. Nor am I a muppet. Notepad is fine for me.
2. Please don’t berate me for taking an alternative approach to web development. That is really immature.
3. Just a question about the script – Why return false on the mouseovers? There isn’t a need for it, is there? Enlighten me.
4. About IE – Most people only use it because they know of no other alternative. I myself display a “Get Firefox” sticker on my site. Eventually I’ll make Firefox my main browser, but MyIE2 is just too good to leave.
5. I tried to give an idea: using custom attributes. If I remember someone yelled at me for not being open-minded. Couldn’t you at least consider some sort of approach?
6. Explain to me how my CSS isn’t used right. My CSS would be 100% valid except that the validator has a bug when it encounters -moz-box-sizing: border-box.
7. XHTML Strict? Been there done that. Tried it, didn’t like it. I like to use Capital tags sometimes.
8. Doctypes are required? I really don’t mean to be rude, but if you want to use DOCTYPES, go ahead. I might start using them later. I’m in no hurry. It’s my website, and I’ll code as I wish, as long as it works in as many browsers as possible.
Now, back to the article…
Copy & paste the code below to embed this comment.
Justin
> Doctypes are required? … as long
> as it works in as many browsers
> as possible.
http://www.alistapart.com/articles/doctype/
You offer no real excuse for not including the DOCTYPE declaration, it’s a simple copy/paste and does not cause page rendering problems.
Try the HTML 4.0 Strict DOCTYPE, it’s quite forgiving.
Maybe you’re just saying this to get a rise out of us? It seems quite odd to be concerned about XHTML compliancy, heavy CSS usage, yet claim the use of a DOCTYPE declaration is overkill and unnessasary.
Although I do a lot of things to purposely piss hellbent standards people on my site, removing DOCTYPES is not one of them. The real reason goes back to 2003 when I was extremely anti-standards. Since my editor automatically inserts a DOCTPYE (HTML 4 Transitional), the first thing I did when writing a new page was to remove it. “Screw WaSP” I used to say. Now it’s like a habit I can’t break. Always ditch DOCTYPE. I’m trying to break it, but subconsciously I remove it. I don’t really do it to piss anyone off.
Pointless discussion here. I don’t care if you have a habit of praying to bricks, just to be different, or type your web sites with 3 toes to see if you can, fact is that this has nothing to do with this article (advocating CSS and DOM and giving away the benefit of standard mode is a contradiction in terms, but we get used to that).
The return false was force of habit, I do that for the onclick and onkeypress ones, hence it slipped into the onmouseover. I don’t see any justification for them other than maybe overruling inline onmouseover calls (which may not work on all browsers), so you can happily remove them. They don’t hurt though whereas a missing doctype does.
Copy & paste the code below to embed this comment.
Chris Tembreull
… is to use no Javascript at all. Don’t get me wrong, Javascript is great and all that, but this is a solution that already has an end-to-end CSS implementation.
you can also get a bit clever and add borders:
tr:hover td:first-child
{
border-left: 1px solid #f90;
}
tr:hover td:last-child
{
border-right: 1px solid #f90;
}
tr:hover td
{
border-top: 1px solid #f90;
border-bottom: 1px solid #f90;
background-color: #fcf6ed;
}
Caveat: this won’t work for now on IE – it doesn’t support tr:hover or td:first|last-child. But I’ve got a sneaking suspicion that Dean Edwards’ current endeavor might make that possible. In any case, it does work on recent mozilla releases and if MS ever decides to make IE standards-compliant, it’ll work there too.
We should enforce the same rules as the CSS/Email article discussion has: good grammar only.
Michael has to leave because he used “it’s” where it should read “its”.
Oh and using a DOCTYPE does cause a bit of harm on IE6. I don’t wanna take any chances.
Is Michael implying I’m a troll? OMG that is so the Exploring Footers article discussion.
Somewhat similar to Jason Karns comments http://www.alistapart.com/discuss/tableruler/8/#c7519 except…
I have a table that uses a rowspan covering two rows per item. Without nesting all the data in a row, how would I be able to accomplish this? So when you roll over either of these rows they both highlight.
I believe a few other people asked about multiple classes before I did. Now you’re complaining about my link when I’m just filling in the blanks that you left out.
The discussion on multiple classes has a lot of other comments between. Here’s a recap:
You said: “I still don’t see the point in several classes, when you can add in ID and a contextual selector?”
My reply:
How about using different class token for alternate rows?
You said:
the multiple class one for example was rather useless
You said:
The script as it is (with some of the aforementioned changes – multiple classes for example) can work with any clean markup, hand coded, from a CMS output or a database call.
Now we get the truth out. That’s why I posted the link, and if you’d read the page more thoroughly before making denigrating statements, you’d see there’s a lot of information that the w3c spec doesn’t include. The page links to the HTML and CSS 2 TRs.
To be honest, your example is not really useful in and of itsself, though it could be useful in an application. However, thin client application developers should be able to do this stuff in his sleep.
I am still a novice at this and a lot of the posts above confused me . However, I wanted to say a massive thanks to Chris, I have just put the ruler on my site and I think its looks great.
Copy & paste the code below to embed this comment.
Toolman
Hey guys;
Great idea here; I have modified the code to stop it clobbering existing classes on the TRs – it still clobbers the onmouseover/out though. Thought someone might like this:
function tableruler()
{
if (document.getElementById && document.createTextNode)
{
var tables=document.getElementsByTagName(‘table’);
for (var i=0;i<tables.length;i++)
{
if(tables.className.indexOf(tableRuleClass) >= 0)
{
var trs=tables.getElementsByTagName(‘tr’);
for(var j=0;j<trs.length;j++)
{
if(trs[j][removed].nodeName==‘TBODY’)
{
trs[j].
{
if (this.className.indexOf(ruledClass) == -1)
{
this.className=this.className + ruledClass;
}
return false;
}
trs[j].
{
if (this.className.indexOf(ruledClass) >= 0)
{
this.className = this.className.substring(0, this.className.length – ruledClass.length);
}
return false;
}
}
}
}
}
}
}
97 Reader Comments
Back to the ArticleShakey
You’re doing such a tremendous job of keeping me entertained across this thread and others.
As somebody who takes pride in learning and writing valid, semantically correct XHTML and CSS by hand – after all, it’s the blind editing of the Dreamweavers and Frontpages of the world that only help to get muppets like you online – I find it to be massively offensive that you wade in here with rarely a useful comment to make chastising all of us for our opinions and practices when you don’t even bother to TRY and do things properly yourself!
If you are even remotely serious about your role as a web designer/developer/programmer/whatever then valid, clean markup is essential, Doctypes are a requirement not an option, IE is truly awful but must be catered for, the list goes on.
Come back and moan at us for being ridiculous for using semantics or wishing IE dea when you start writing XHTML 1.0 Strict – it’s honestly not that difficult.
darkcryst
Chris – I guess that was my point about the alternative method.
While I think that it is a tad pointless and inelegant to use this method as its shown in this example, it could be a valuable springboard.
Exactly what AListApart should be really, not how-to’s. So.. you know, great.
Shakey – wow… venom there. I agree with the general sentiment of “huh?” reguarding Dante, and you are right, XHTML and CSS isn’t that hard, he just choses not to use it right.
His loss, long term.
Dante-Cubed
As you have painstakingly told me.
1. I have never used FrontPage or Dreamweaver or any soft of WYSIWYG editor to create websites. Nor am I a muppet. Notepad is fine for me.
2. Please don’t berate me for taking an alternative approach to web development. That is really immature.
3. Just a question about the script – Why return false on the mouseovers? There isn’t a need for it, is there? Enlighten me.
4. About IE – Most people only use it because they know of no other alternative. I myself display a “Get Firefox” sticker on my site. Eventually I’ll make Firefox my main browser, but MyIE2 is just too good to leave.
5. I tried to give an idea: using custom attributes. If I remember someone yelled at me for not being open-minded. Couldn’t you at least consider some sort of approach?
6. Explain to me how my CSS isn’t used right. My CSS would be 100% valid except that the validator has a bug when it encounters -moz-box-sizing: border-box.
7. XHTML Strict? Been there done that. Tried it, didn’t like it. I like to use Capital tags sometimes.
8. Doctypes are required? I really don’t mean to be rude, but if you want to use DOCTYPES, go ahead. I might start using them later. I’m in no hurry. It’s my website, and I’ll code as I wish, as long as it works in as many browsers as possible.
Now, back to the article…
Justin
> Doctypes are required? … as long
> as it works in as many browsers
> as possible.
http://www.alistapart.com/articles/doctype/
You offer no real excuse for not including the DOCTYPE declaration, it’s a simple copy/paste and does not cause page rendering problems.
Try the HTML 4.0 Strict DOCTYPE, it’s quite forgiving.
Maybe you’re just saying this to get a rise out of us? It seems quite odd to be concerned about XHTML compliancy, heavy CSS usage, yet claim the use of a DOCTYPE declaration is overkill and unnessasary.
Dante-Cubed
Although I do a lot of things to purposely piss hellbent standards people on my site, removing DOCTYPES is not one of them. The real reason goes back to 2003 when I was extremely anti-standards. Since my editor automatically inserts a DOCTPYE (HTML 4 Transitional), the first thing I did when writing a new page was to remove it. “Screw WaSP” I used to say. Now it’s like a habit I can’t break. Always ditch DOCTYPE. I’m trying to break it, but subconsciously I remove it. I don’t really do it to piss anyone off.
Chris
But then, I was never into hairbands :-)
Pointless discussion here. I don’t care if you have a habit of praying to bricks, just to be different, or type your web sites with 3 toes to see if you can, fact is that this has nothing to do with this article (advocating CSS and DOM and giving away the benefit of standard mode is a contradiction in terms, but we get used to that).
The return false was force of habit, I do that for the onclick and onkeypress ones, hence it slipped into the onmouseover. I don’t see any justification for them other than maybe overruling inline onmouseover calls (which may not work on all browsers), so you can happily remove them. They don’t hurt though whereas a missing doctype does.
Chris Tembreull
… is to use no Javascript at all. Don’t get me wrong, Javascript is great and all that, but this is a solution that already has an end-to-end CSS implementation.
Given a table row as follows:
<tr>
<td>Column 1</td>
<td>Column 2</td>
<td>Column 3</td>
</tr>
You can apply CSS as follows:
tr:hover td
{
background-color: #fcf6ed;
}
you can also get a bit clever and add borders:
tr:hover td:first-child
{
border-left: 1px solid #f90;
}
tr:hover td:last-child
{
border-right: 1px solid #f90;
}
tr:hover td
{
border-top: 1px solid #f90;
border-bottom: 1px solid #f90;
background-color: #fcf6ed;
}
Caveat: this won’t work for now on IE – it doesn’t support tr:hover or td:first|last-child. But I’ve got a sneaking suspicion that Dean Edwards’ current endeavor might make that possible. In any case, it does work on recent mozilla releases and if MS ever decides to make IE standards-compliant, it’ll work there too.
Michael
So this is like the 8th time someone has mentioned the hover pseudo-class that doesn’t work in IE.
Michael
Please don’t feed the trolls, they’ll only come back for more.
Dante-Cubed
We should enforce the same rules as the CSS/Email article discussion has: good grammar only.
Michael has to leave because he used “it’s” where it should read “its”.
Oh and using a DOCTYPE does cause a bit of harm on IE6. I don’t wanna take any chances.
Is Michael implying I’m a troll? OMG that is so the Exploring Footers article discussion.
darkcryst
Causes harm in IE6? Do explain, because I’ve found IE6 quite evil when I leave one out.
Bradley Caddel
Somewhat similar to Jason Karns comments http://www.alistapart.com/discuss/tableruler/8/#c7519 except…
I have a table that uses a rowspan covering two rows per item. Without nesting all the data in a row, how would I be able to accomplish this? So when you roll over either of these rows they both highlight.
——Example——
<tr>
<td rowspan=“2”>Kraftwerk</td>
<td>Die Mensch-Maschine</td>
</tr>
<tr>
<td>Dopplereffekt</td>
</tr>
——/Example——
Am I asking too much?
DHTML Kitchen
Dear Chris,
I believe a few other people asked about multiple classes before I did. Now you’re complaining about my link when I’m just filling in the blanks that you left out.
The discussion on multiple classes has a lot of other comments between. Here’s a recap:
You said: “I still don’t see the point in several classes, when you can add in ID and a contextual selector?”
My reply:
How about using different class token for alternate rows?
You said:
the multiple class one for example was rather useless
You said:
The script as it is (with some of the aforementioned changes – multiple classes for example) can work with any clean markup, hand coded, from a CMS output or a database call.
Now we get the truth out. That’s why I posted the link, and if you’d read the page more thoroughly before making denigrating statements, you’d see there’s a lot of information that the w3c spec doesn’t include. The page links to the HTML and CSS 2 TRs.
To be honest, your example is not really useful in and of itsself, though it could be useful in an application. However, thin client application developers should be able to do this stuff in his sleep.
Ant Molloy
I am still a novice at this and a lot of the posts above confused me . However, I wanted to say a massive thanks to Chris, I have just put the ruler on my site and I think its looks great.
Thanks
Ant
Toolman
Hey guys;
Great idea here; I have modified the code to stop it clobbering existing classes on the TRs – it still clobbers the onmouseover/out though. Thought someone might like this:
function tableruler()
{
if (document.getElementById && document.createTextNode)
{
var tables=document.getElementsByTagName(‘table’);
for (var i=0;i<tables.length;i++)
{
if(tables.className.indexOf(tableRuleClass) >= 0)
{
var trs=tables.getElementsByTagName(‘tr’);
for(var j=0;j<trs.length;j++)
{
if(trs[j][removed].nodeName==‘TBODY’)
{
trs[j].
{
if (this.className.indexOf(ruledClass) == -1)
{
this.className=this.className + ruledClass;
}
return false;
}
trs[j].
{
if (this.className.indexOf(ruledClass) >= 0)
{
this.className = this.className.substring(0, this.className.length – ruledClass.length);
}
return false;
}
}
}
}
}
}
}
Marc Palau
<style>
table.ruler{
border:1px solid black;
width:300px;
font-family:Tahoma,Verdana,Arial,Helvetica;
}
th{
background-color:#F2F2F2;
text-align:left;
padding-left:3px;
}
td{
border-top:1px solid black;
padding-left:5px;
}
tr.trover{
background-color:#CECEDE;
cursor:hand; cursor:pointer;
color:#2E2E3E;
}
tr.down{
background-color:#FFFFAE;
cursor:hand; cursor:pointer;
}
</style>
[removed]
window.onload=function(){
if(document.getElementById&&document;.createTextNode){
var taules=document.getElementsByTagName(“table”);
for(var i=0;i<taules.length;i++){
var e=taules;
if(e.className==“ruler”){
var trs=e.getElementsByTagName(“tr”);
for(var j=0;j<trs.length;j++){
if(trs[j].firstChild.tagName.toLowerCase()!=“th”){
trs[j].clicat=false;
trs[j].
this.className=“trover”;
return false;
}
trs[j].
if(this.clicat==false){
this.className=”“;
return false;
}else{
this.className=“down”;
return false
}
}
trs[j].
this.clicat=!this.clicat;
this.className=“down”;
return false;
}
}
}
}
}
}
}
[removed]
<table cellpadding=“0” cellspacing=“0” class=“ruler”>
<tr><th>NUM</th><th>NOMBRE</th><th>APELLIDO</th></tr>
<tr><td>1.</td><td>Marc</td><td>Palau</td></tr>
<tr><td>2.</td><td>Marc</td><td>Palau</td></tr>
<tr><td>3.</td><td>Marc</td><td>Palau</td></tr>
<tr><td>4.</td><td>Marc</td><td>Palau</td></tr>
</table>
Chris
now, and took in all the questions about multi classes.
http://www.onlinetools.org/tools/domtableenhance.php
is the result, enjoy.
Still no click event, but I really think things that are no links, should not be clickable.