...

View Full Version : Border style different in 3 browsers



wcipolli
03-01-2012, 08:23 PM
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;
}

felgall
03-01-2012, 08:30 PM
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';

wcipolli
03-01-2012, 08:42 PM
Thanks for your quick reply but that didn't work for me!

felgall
03-01-2012, 08:47 PM
Thanks for your quick reply but that didn't work for me!

So what does your code look like now?

wcipolli
03-02-2012, 12:16 PM
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?

wcipolli
03-02-2012, 12:24 PM
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>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum