object.style.outline

not working in google chrome

[nyteshade]

I have a function that works in FF, Opera, IE, but not in Chrome (Safari stopped responding some weeks ago and has since failed to install under XP for me!)... I haven't found any reference to Chrome not handling style.outline (see HERE)but it seems to be the culprit. Anyone know anything on this subject? Thanks all.

function trhighlight_outline(){
if(!document.getElementsByTagName("tr")) return false;
var rows = document.getElementsByTagName("tr");
for (var i=0; i<rows.length; i++){
if(rows[i].firstChild.nodeName == "TD" &amp;&amp; rows[i].parentNode.nodeName != "TFOOT"){
rows[i].onmouseover = function(){
this.style.outline="thick solid #0000FF";//<=====HERE
}
rows[i].onmouseout = function(){
this.style.outline="none";
}
}
}
}

[penders]

Try setting the individual properties, rather than the shorthand 'outline' property...?

outlineColor = '#00f'; 
outlineStyle = 'solid'; 
outlineWidth = 'thick'; // Set width last

I assume && is just a forum typo?

Just a thought... shouldn't this be done in CSS rather than JS? Perhaps just apply a class to the appropriate TRs using JS?

[nyteshade]

penders: your suggestion works in ff, opera, ie, but still not in chrome! And yes, I'm separating presentation from behavior in all my current pages; my next step is to create a function that uses className property to 'update' on-the-fly from external css class, but I ain't there yet because this appearing glitch has got my attention, arrrgh!

function trhighlight_outline(){
if(!document.getElementsByTagName("tr")) return false;
var rows = document.getElementsByTagName("tr");
for (var i=0; i<rows.length; i++){
if(rows[i].firstChild.nodeName == "TD" && rows[i].parentNode.nodeName != "TFOOT"){
rows[i].onmouseover = function(){
//this.style.outline="thick solid #0000FF";
this.style.outlineColor = '#00f'; 
this.style.outlineStyle = 'solid'; 
this.style.outlineWidth = 'thick';
}
rows[i].onmouseout = function(){
this.style.outline="none";
this.style.outlineStyle = 'none'; 
this.style.outlineWidth = 0;
}
}
}
}

[rainborick]

You may be running into a difference in the way that the various browsers render tables, particularly the <tr> element. Chrome may not be able to render an outline on <tr>s because they don't generally have any screen real estate to be overdrawn and for the outline to visibly occupy. Have you tried getting Chrome to render this effect with a test page that uses explicit CSS instead of JavaScript?

[penders]

...getting Chrome to render this effect with a test page that uses explicit CSS instead of JavaScript?

...and that seems to be the problem. Chrome (and Safari) do not seem to render an outline on TRs when using CSS only, so trying to do this with JS is not going to help. (I tried your JavaScript in Chrome and it certainly seems to apply the styles - as seen in the developer tools - but, as mentioned, there is no change visually.)

It clearly works OK in other browsers. In fact, other browsers can also outline TBODY etc, but not Chrome. However, chrome can outline TDs. Not sure of the reasoning behind this. At first I was thinking that it was perhaps because a user can't focus a TR, but I don't think that's it. Yes, there would seem to be a difference in rendering, however, I'm not convinced by the "...don't generally have any screen real estate to be overdrawn..." argument, since I always thought that the outline was independent of 'screen real estate', in much the same way as CSS3 box-shadow? (Incidentally, you can't seem to apply box-shadow to a TR in Chrome either.)

[nyteshade]

Thanks rainborick, penders. Just to confirm: I've test TD and TR elements using the CSS outline property and both behave just as described in your replies. Sticking with just CSS I used:

tbody tr td:hover {outline: thick solid green;}

...and this renders a visual result under Chrome. This:

tbody tr:hover {outline: thick solid green;}

...does not produce a visual result. Interesting.