Border style different in 3 browsers

So I'm working on a table of "choices" the user selects one row and the underlying radio buttons are used to track selection. when the user selects the row I change the black outline from 1px to 2px and from black to blue to designate that it has been selected. In IE9 it works perfectly, but there are no borders at all in chrome or firefox.

//CODE TO CREATE BORDER

function mediaSelector(radioID) {
var mediaID = "rdbtn-media" + radioID;
document.getElementById(mediaID).checked = true;
var c1= document.getElementById("div1");
var c2 = document.getElementById("div2");
var c3 = document.getElementById("div3");
switch(radioID){
case 1:
c2.style.border = "1px solid #000000";
c3.style.border = "1px solid #000000";
c1.style.border = "2px solid #0000FF";
break;
case 2:
c3.style.border = "1px solid #000000";
c1.style.border = "1px solid #000000";
c2.style.border = "2px solid #0000FF";
break;
case 3:
c1.style.border = "1px solid #000000";
c2.style.border = "1px solid #000000";
c3.style.border = "2px solid #0000FF";
break;
}

}


//FIREBUG STYLE TAB
element.style {
border: 1px solid #000000;
height: 94px;
}
Inherited fromtd
p, ul, ol, li, td, th, dl, dt, blockquote, pre, code, h5, h6, label, subtext {
color: #666666;
font-size: 1em;
text-align: left;
}
MasterUI.css (line 712)
p, li, dd, dt, th, td, blockquote, pre, code, xmp, #left-nav, #related-links, #link-list {
font-size: 1em;
}
MasterUI.css (line 35)
html, body, p, ul, ol, li, td, th, dl, dt, blockquote, h1, h2, h3, h4, h5 {
color: #FFFFFF;
font-family: verdana,arial,helvetica,sans-serif;
}
MasterUI.css (line 14)
Inherited fromtable.main-table2
table.main-table2 {
border-collapse: collapse;
border-spacing: 0;
font-size: 11px;
}
MasterUI.css (line 4143)
Inherited fromdiv.AccordionPanelContent
.ui-widget-content-accordion {
color: #373434;
}
jquery...acc.css (line 42)
.AccordionPanelContent {
color: #333333;
}
MasterUI.css (line 5807)
Inherited fromdiv#Accordion1.Accordion
.ui-widget-accordion {
font-family: Arial,sans-serif;
font-size: 1.2em;
}
jquery...acc.css (line 37)
Inherited fromdiv.MainWrapper
.MainWrapper {
text-align: left;
}
MasterUI.css (line 3385)
Inherited frombody.homepage
element.style {
cursor: pointer;
}
html, body {
color: #000000;
font-size: 11px;
}
MasterUI.css (line 702)
html, body, p, ul, ol, li, td, th, dl, dt, blockquote, h1, h2, h3, h4, h5 {
color: #FFFFFF;
font-family: verdana,arial,helvetica,sans-serif;
}
MasterUI.css (line 14)
html, body {
font-size: 84%;
text-align: center;
}
MasterUI.css (line 5)
Inherited fromhtml
html, body {
color: #000000;
font-size: 11px;
}
MasterUI.css (line 702)
html, body, p, ul, ol, li, td, th, dl, dt, blockquote, h1, h2, h3, h4, h5 {
color: #FFFFFF;
font-family: verdana,arial,helvetica,sans-serif;
}
MasterUI.css (line 14)
html, body {
font-size: 84%;
text-align: center;
}

Either set borderStyle, borderWidth, and borderColor separately

c2.style.borderWidth = '1px';
c2.style.borderStyle = 'solid';
c2.style.borderColor = '#000';

or use cssText instead

c2.style.cssText = 'border : 1px solid #000';

Thanks for your quick reply but that didn't work for me!

Thanks for your quick reply but that didn't work for me!

So what does your code look like now?

function mediaSelector(radioID) {
var mediaID = "rdbtn-media" + radioID;
document.getElementById(mediaID).checked = true;
var c1= document.getElementById("div1");
var c2 = document.getElementById("div2");
var c3 = document.getElementById("div3");
switch(radioID){
case 1:
c2.style.csstext = 'border : 1px solid #000000';
c3.style.csstext = 'border : 1px solid #000000';
c1.style.csstext = 'border : 2px solid #0000FF';
break;
case 2:
c3.style.csstext = 'border : 1px solid #000000';
c1.style.csstext = 'border : 1px solid #000000';
c2.style.csstext = 'border : 2px solid #0000FF';
break;
case 3:
c1.style.csstext = 'border : 1px solid #000000';
c2.style.csstext = 'border : 1px solid #000000';
c3.style.csstext = 'border : 2px solid #0000FF';
break;
}

}


I also tried setting them separately. Any other suggestions?

I should also note that these divs are part of a table. Is it possible that it could be a table setting?



<table cellspacing="5" border="0" width="100%" >
<tr id="div1" style="border:1px solid #000000; height:94px;" onclick="mediaSelector(1);"><td width="22">
<input type="radio" name="rdbtn-media" id="rdbtn-media1" value="c1" checked="checked" style="display:none;"/>

</td>
<td width="84"><img src="<%= Url.StaticContext("c1.png") %>" /></td>
<td width="68">c1</td>
<td>

<div id="c1IDNumber" >
<input class="addressArea" name="IDNUM" type="text" value="Enter id number" />

<div style="display: none; padding-left:180px;color:Red; margin-top:-15px; margin-left:-10px" id="idNumberError">
Serial Number Required.


</div>

</div>

</td> </tr>

<tr id="div2" style="border:1px solid #000000; height:94px;" onclick="mediaSelector(2);"><td>

<input type="radio" name="rdbtn-media" id="rdbtn-media2" value="c2" style="display:none;"/>

</td><td style="padding-left:10px;"><img src="<%= Url.StaticContext("c2.png") %>" /></td><td>c2</td><td></td> </tr>

<tr id="div3" style="border:1px solid #000000; height:94px;" onclick="mediaSelector(3);">
<td>

<input type="radio" name="rdbtn-media" id="rdbtn-media3" value="c3" style="display:none;"/>

</td>
<td><img width="80" src="<%= Url.StaticContext("3.png") %>" /></td>
<td>c3</td>
<td><div id="divc3Template" style="display:none">
<select name="c3-select" id="c3Template" class="data-c3-select" style="width: 220px;" disabled="disabled">
<% foreach (string temName in (List<string>)ViewData["dataTemplateNames"]) {
%>
<option><%=temName%></option>
<%
}%>

</select>
</div></td> </tr>

</table>