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>
