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>
