PDA

View Full Version : [JavaScript-CSS-Firefox] Cannot change borderColor of TD



eusukefuin
03-05-2010, 06:05 PM
I have posted this in stackoverflow. But, until now I haven't got any answer. Therefore, I try my luck here since this forum seems to be more suitable for JS related questions.

Using JS to set the background color of a TD is fine. But, setting the border color is problematic in FF 3.0.18 although IE 6 doesn't experience this. FF is problematic in that it requires the TD element to have an attribute style initialized to border-style: solid. Without that, setting border color of a TD won't work. Is this known bug?

How do I set the border color without having to set style attribute as well as the initialization value?

I know another trick of setting the class attribute instead of setting the border color directly. Is this an indication that somehow TD hates having its border color set dynamically? Is this known as well?

The problematic code is below (the goal is find out why setting the border color of simple truth 1 does not work while simple truth 3 works when I employ the trick described above):



<html>
<head>
<title>Quirks FF 3.0.18</title>
<style type="text/css">
table {
border-collapse: collapse;
}
</style>
<script type="text/javascript">
function changeBgColor()
{
document.getElementById('simple').style.backgroundColor='yellow';
document.getElementById('simple2').style.backgroundColor='yellow';
document.getElementById('simple3').style.backgroundColor='yellow';
}

function quirk(id)
{
var x = document.getElementById(id);

x.style.border = '2px solid red';
}
</script>
</head>
<body>
<input type="button" onclick="changeBgColor()" value="Change background color"/>
<input type="button" onclick="quirk('simple')" value="Change border color 1"/>
<input type="button" onclick="quirk('simple2')" value="Change border color 2"/>
<input type="button" onclick="quirk('simple3')" value="Change border color 3"/>
<table>
<tr><td id="simple">Simple truth 1</td></tr>
</table>
<table>
<tr><td><span id="simple2">Simple truth 2</span></td></tr>
<table>
<tr><td id="simple3" style="border-style: solid">Simple truth 3</td></tr>
</table>
</body>
</html>

jscheuer1
03-06-2010, 08:55 AM
Firefox is up to at least 3.6 now. In it all three td's get the red border when their respective buttons are clicked.

eus
03-06-2010, 12:47 PM
Ah, okay. Thank you for the notice :-)