Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Jun 2009
    Posts
    19
    Thanks
    1
    Thanked 0 Times in 0 Posts

    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
    Code:
    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;
    }

  • #2
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,639
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Either set borderStyle, borderWidth, and borderColor separately

    Code:
    c2.style.borderWidth = '1px';
    c2.style.borderStyle = 'solid';
    c2.style.borderColor = '#000';
    or use cssText instead

    Code:
    c2.style.cssText = 'border : 1px solid #000';
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #3
    New Coder
    Join Date
    Jun 2009
    Posts
    19
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks for your quick reply but that didn't work for me!

  • #4
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,639
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Quote Originally Posted by wcipolli View Post
    Thanks for your quick reply but that didn't work for me!
    So what does your code look like now?
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #5
    New Coder
    Join Date
    Jun 2009
    Posts
    19
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Code:
    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?

  • #6
    New Coder
    Join Date
    Jun 2009
    Posts
    19
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I should also note that these divs are part of a table. Is it possible that it could be a table setting?

    Code:
                            <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>


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •