homepage Welcome to WebmasterWorld Guest from 107.20.109.52
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

    
<col>
how to affect a column of td elements
nyteshade




msg:4352743
 3:51 pm on Aug 17, 2011 (gmt 0)

There are some styles involved here but I think my question is primarily about the <col> element. I would like to change the backgroud-color and color of text for each td element under a col element with the html:

<!DOCTYPE HTML>
<html lang="en">
<head><title></title>
<style>
.colhylite{
background-color:orange;
color:white;
}
</style>
</head>
<body>

<table>
<col class="colhylite" /><col style="color:white; background-color:orange;" /><col style="background-color:orange;" />
<tr><td>tdcontent1</td><td>tdcontent2</td><td style="color:white;">tdcontent3</td></tr>
<tr><td>tdcontent1</td><td>tdcontent2</td><td style="color:white;">tdcontent3</td></tr>
<tr><td>tdcontent1</td><td>tdcontent2</td><td style="color:white;">tdcontent3</td></tr>
<tr><td>tdcontent1</td><td>tdcontent2</td><td style="color:white;">tdcontent3</td></tr>
<tr><td>tdcontent1</td><td>tdcontent2</td><td style="color:white;">tdcontent3</td></tr>
</table>

</body>
</html>


I thought that creating a css class as an attribute for <col> would be the solution but only the background-color property works, the color property is ignored for tdcontent1.

The same is true if I use an inline style on the <col> element, that is, again the color property fails to display in tdcontent2.

Only the tdcontent3 displays as 'I want' but as you see it entails inline styling for each tdcontent td element.

My question is 'what is up with <col>'? Do I just have access to the background-color property with <col>. I've tried several other properties but none of them work if styled by css class or used inline with the <col> element. What am I missing here? Thx all!

 

penders




msg:4352758
 4:19 pm on Aug 17, 2011 (gmt 0)

Yeah, the col (and colgroup) elements aren't quite as flexible as one would like it seems.

I explored this in a thread a few years(!?) ago, has it changed much (if at all) since then?
[webmasterworld.com...]

nyteshade




msg:4352772
 4:40 pm on Aug 17, 2011 (gmt 0)

Thanks penders, that link to the old thread was helpful. Seems too that HTML5 is not supporting most of the old HTML4x optional attributes according to w3c. I will simply adopt the standard and just use background-color and border properties when utilizing <col>. Arrgggh! Thought I knew my HTML. Peace.

nyteshade




msg:4395700
 7:35 pm on Dec 8, 2011 (gmt 0)

I have returned to this thread because I've found new stuff after re-re-reading pender's reply and suggested url. My initial problem was not that <col> element was non-responsive to css property values, fortunately ;) it was my mistake. I had two linked classes:
.css3striping tr:nth-child(odd) { background-color:#FFF; }
.css3striping tr:nth-child(even) { background-color:#E6EBE6; }

...on a <table> element:
<table class="css3striping">
And, was attempting to subsequently highlight columns via DOM scripting like so,
document.getElementById(columnid).setAttribute("class","colhylite");
The DOM script failed, without flagging an error. I'm ASSuming that the rendering engine doesn't allow multiple references to the CSS background property, ie, it accepts only the first reference and ignores subsequent ones? I'm at [w3.org ]snoring my way to an answer. However, it doesn't appear to have a problem with:

table.dashed td {
border-bottom: thin dashed #D1D1E2;
}
tableelement.setAttribute("class","dashed");


It's not the solution I'd like[meinsandkasten.com ], but it'll do until I find an answer.

penders




msg:4395716
 8:05 pm on Dec 8, 2011 (gmt 0)

Hi nyteshade, just passing quickly, will stop by again later... but shouldn't this:

document.getElementById(columnid).setAttribute("class","colhylite");


Be...

document.getElementById(columnid).className = "colhylite";


...for cross-browser compatibility?

nyteshade




msg:4395770
 10:03 pm on Dec 8, 2011 (gmt 0)

penders, re: setAttribute, I had no idea the method was not cross-browser compatible. It appears to work in all the latest <em>modern<em> browsers, and IE9 ;) and IE8 (which I use on winXP). But I did a quick search and there is some poo-pooing of setAttribute.

I replaced setAttribute with className in one js file on my domain and it worked under chrome, IE8, opera and my fav ff. Before I do a global replace I need to do more research. Thanks for the heads-up!

nyteshade




msg:4395940
 10:59 am on Dec 9, 2011 (gmt 0)

Best explanation I found: [sitepoint.com ]. I can't test this since I do not have IE6 installed.

Updated links for those interested:[url]https://developer.mozilla.org/en/DOM/element.className[/url] and [url]https://developer.mozilla.org/en/DOM/element.setAttribute[/url]

nyteshade




msg:4416591
 1:32 pm on Feb 11, 2012 (gmt 0)

I can't seem to get setAttribute to fail, as most post say, in every event where I use it in my domain under IE8 compatibility view. The following executes and renders without fail:


var slideshow = d.createElement("div");
slideshow.setAttribute("id","slideshow");
var preview = d.createElement("img");
preview.setAttribute("src","images/bookcovers.jpg");
preview.setAttribute("alt","building blocks of web design");
preview.setAttribute("id","preview");


I don't mean to resurrect the slain here, but I've just about finished adjusting my web pages to account for IE6 and this is the very last thing that's nagging at me.

Is it just that setAttribute('class', classname) is the primary offender re IE6 and never works; and maybe the other attributes get a pass, that is, they work? Or maybe IE6 is simply unpredictable and all setAttribute method calls should be converted to HTML-DOM element.attribute=Xnn?

Thanks all.

penders




msg:4418972
 9:23 pm on Feb 17, 2012 (gmt 0)

Hi nyteshade, sorry it's been a few days...

I don't think the problem is specifically with setAttribute() (although it is in a way), but with attempting to set certain HTML attributes, notably "class", "style" and event attributes.

JavaScript defines object properties for all the main HTML attributes. So the HTML attribute can be set by either calling the setAttribute() method or by assigning directly to the appropriate JavaScript property. The JavaScript property does not necessarily have the same name as the HTML attribute. "class" (HTML attribute) and "className" (JS property) is the obvious one. "class" is a reserved word in JavaScript (for future use) so you cannot (or should not) have a property called "class", which is why we have "className" instead.

Now, one of the big problems with IE5-7 is that these browsers do not differentiate between HTML attributes and JavaScript properties. Calling setAttribute('class',<value>) will (in theory) attempt to set the JavaScript property 'class' in these browsers which is clearly wrong and consequently does not work. (I say 'in theory', because you can't read the property back to check!)

It is for these reasons that I believe (for versions of IE before 8) it is considered safer to set the JavaScript property (where available) rather than using the setAttribute() method. However, AFAIK, it is only these few attributes that are affected (if anyone knows more do tell) and you probably don't think about using setAttribute() to set the "style" or event attributes anyway.

nyteshade




msg:4419199
 10:42 pm on Feb 18, 2012 (gmt 0)

Thanks penders, I have a better understanding of it now. I'm using the format:

HTMLElementObject.className=classname;

...for setting class; and a similar syntax for the remaining HTML attributes like so:

HTMLElementObject.id="nnn";
HTMLElementObject.src="dir/nnn.nnn";HTMLElementObject.alt="nnnn";

...just to be on the safe side. This works for IE8- .

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / HTML
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved