Q:

the following color change functions work fine in IE9 and FF but not in earlier IE or CHROME

//the following function change JavaScript code colors in the CSS rendered images, it is only working in IE9 and FF is there a hack for this or is it something in the code  page can be seen at http://www.cornholeny.com/c_y_b_arrowhead.php  . //
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
        <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>

       <title>ARROWHEAD DESIGN</title>

        <link href="css/structure.css" rel="stylesheet" type="text/css" />
        <link href="css/design.css" rel="stylesheet" type="text/css" />

            <!--[if lte IE 7]>
        <link href="" rel="stylesheet" type="text/css" />
            <![endif]-->

        <?php
         include('includes/meta.php');
         ?>

        <style type="text/css">

            div#menu {
          width: 880px;
        height: 65px;
          float: top;
              margin:0px
            }

        div#main {
         margin-left: 0%;
         margin-right: 0%;
         margin-top: 1px;
         padding: 10px;
             }

        div#footer {
         padding: 15px;
         margin: 0px;
         border-bottom: thin solid #000000;
               }
        </style>

//these are the functions that are activated by select options//

    <script type="text/javascript">

function colorchange1()
{

document.getElementById("box-a").style.backgroundColor="grey";

document.getElementById("box-a2").style.backgroundColor="grey";
}

function colorchange2()
{

document.getElementById("box-a").style.backgroundColor="orange";

document.getElementById("box-a2").style.backgroundColor="orange";

}

function colorchange3()
{

document.getElementById("box-a").style.backgroundColor="yellow";

document.getElementById("box-a2").style.backgroundColor="yellow";
}

function colorchange4()
{

document.getElementById("box-a").style.backgroundColor="#6DE91B";

document.getElementById("box-a2").style.backgroundColor="#6DE91B";
}

function colorchange5()
{

document.getElementById("box-a").style.backgroundColor="blue";

document.getElementById("box-a2").style.backgroundColor="blue";
}

function colorchange6()
{

document.getElementById("box-a").style.backgroundColor="brown";

document.getElementById("box-a2").style.backgroundColor="brown";
}

function colorchange7()
{

document.getElementById("box-a").style.backgroundColor="red";

document.getElementById("box-a2").style.backgroundColor="red";
}

function colorchange8()
{

document.getElementById("box-a").style.backgroundColor="white";

document.getElementById("box-a2").style.backgroundColor="white";
}

function colorchange9()
{

document.getElementById("box-a").style.backgroundColor="black";

document.getElementById("box-a2").style.backgroundColor="black";
}

function colorchange10()
{

document.getElementById("box-a").style.backgroundColor="pink";

document.getElementById("box-a2").style.backgroundColor="pink";
}

function changearrow1()
{

document.getElementById("arrow").style.borderBottomColor="grey";

document.getElementById("arrow2").style.backgroundColor="grey";

document.getElementById("arrow-a").style.borderBottomColor="grey";

document.getElementById("arrow-a2").style.backgroundColor="grey";

}

function changearrow2()
{

document.getElementById("arrow").style.borderBottomColor="orange";

document.getElementById("arrow2").style.backgroundColor="orange";

document.getElementById("arrow-a").style.borderBottomColor="orange";

document.getElementById("arrow-a2").style.backgroundColor="orange";

}

function changearrow3()
{

document.getElementById("arrow").style.borderBottomColor="yellow";

document.getElementById("arrow2").style.backgroundColor="yellow";

document.getElementById("arrow-a").style.borderBottomColor="yellow";

document.getElementById("arrow-a2").style.backgroundColor="yellow";

}

function changearrow4()
{

document.getElementById("arrow").style.borderBottomColor="#6DE91B";

document.getElementById("arrow2").style.backgroundColor="#6DE91B";
document.getElementById("arrow-a").style.borderBottomColor="#6DE91B";

document.getElementById("arrow-a2").style.backgroundColor="#6DE91B";

}

function changearrow5()
{

document.getElementById("arrow").style.borderBottomColor="blue";

document.getElementById("arrow2").style.backgroundColor="blue";

document.getElementById("arrow-a").style.borderBottomColor="blue";

document.getElementById("arrow-a2").style.backgroundColor="blue";

}

function changearrow6()
{

document.getElementById("arrow").style.borderBottomColor="brown";

document.getElementById("arrow2").style.backgroundColor="brown";

document.getElementById("arrow-a").style.borderBottomColor="brown";

document.getElementById("arrow-a2").style.backgroundColor="brown";

}

function changearrow7()
{

document.getElementById("arrow").style.borderBottomColor="red";

document.getElementById("arrow2").style.backgroundColor="red";
document.getElementById("arrow-a").style.borderBottomColor="red";

document.getElementById("arrow-a2").style.backgroundColor="red";

}

function changearrow8()
{

document.getElementById("arrow").style.borderBottomColor="white";

document.getElementById("arrow2").style.backgroundColor="white";
document.getElementById("arrow-a").style.borderBottomColor="white";

document.getElementById("arrow-a2").style.backgroundColor="white";

}

function changearrow9()
{

document.getElementById("arrow").style.borderBottomColor="black";

document.getElementById("arrow2").style.backgroundColor="black";

document.getElementById("arrow-a").style.borderBottomColor="black";

document.getElementById("arrow-a2").style.backgroundColor="black";

}

function changearrow10()
{

document.getElementById("arrow").style.borderBottomColor="pink";

document.getElementById("arrow2").style.backgroundColor="pink";

document.getElementById("arrow-a").style.borderBottomColor="pink";

document.getElementById("arrow-a2").style.backgroundColor="pink";

}
        </script>

        <?php
         include('includes/header-menu.php');
         ?>

    </head>

    <body>

 //these are the css images//

        <style type="text/css">

#container { 
    width: 785px; 
    height: 450px;
    background-color: #D9F3CF;
    margin-left: auto;
    margin-right: auto;
    padding: 15px; 
    position: relative;

}

#boardleft { 
    width: 151px; 
    height: 301px; 
    position: relative;
    float:left; 
}

#boardright { 
    width: 151px; 
    height: 301px; 
    position: relative;
    float:right; 
}

#circle{
    border:none;
    background-color: #D9F3CF;
    width:45px;
    height:45px;
    border-radius:50%;
    top:30px;
    left:52.5px;
    position: absolute;
}

#box-a {

    width: 150px;
    height:300px;

    background-color: white;

        border: none;

    position: absolute;
}

#box-a2 {

    width: 150px;
    height:300px;

    background-color: white;

        border: none;

    position: relative
}

#arrow2 {
        width: 30px;
    height:150px;

    background-color: white;

    border: none;
    bottom: 0px; 
    left: 60px;
    position: absolute;
}

#arrow {
     width: 0; 
    height: 0;
    border-left: 35px solid transparent;
    border-right: 35px solid transparent;
    border-bottom: 75px solid white;
    bottom: 150px; 
    left: 40px;
    position: absolute;
}

#arrow-a2 {
        width: 30px;
    height:150px;

    background-color: white;

    border: none;
    bottom: 0px; 
    left: 60px;
    position: absolute;
}

#arrow-a {
     width: 0; 
    height: 0;
    border-left: 35px solid transparent;
    border-right: 35px solid transparent;
    border-bottom: 75px solid white;
    bottom: 150px; 
    left: 40px;
    position: absolute;
}

    p.numbers_black {
        color: black;
        text-align: center;
        font-size: 20pt;
        }

    p.numbers_white {
        color: white;
        text-align: center;
        font-size: 20pt;

    }

#colorchart { 
    width: 325px; 
    height: 130px;
    background-color: #D9F3CF;
    position: absolute;
    bottom: 8px;
    left: 245px;
}

#box-grey {

        width: 65px;
    height:65px;

    background-color: grey;

        border: none;

    position: relative;
    float: left;
}

#box-orange {

        width: 65px;
    height:65px;

    background-color: orange;

        border: none;

    position: relative;
    float: left;
}

#box-yellow {

        width: 65px;
    height:65px;

    background-color: yellow;

        border: none;

    position: relative;
    float: left;
}

#box-green {

        width: 65px;
    height:65px;

    background-color: #6DE91B;

        border: none;

    position: relative;
    float: left;
}

#box-blue {

        width: 65px;
    height:65px;

    background-color: blue;

        border: none;

    position: relative;
    float: left;
}

#box-brown {

        width: 65px;
    height:65px;

    background-color: brown;

        border: none;

    position: relative;
    float: left;
}

#box-red {

        width: 65px;
    height:65px;

    background-color: red;

        border: none;

    position: relative;
    float: left;
}

#box-white {

        width: 65px;
    height:65px;

    background-color: white;

        border: none;

    position: relative;
    float: left;
}

#box-black {

        width: 65px;
    height:65px;

    background-color: black;

        border: none;

    position: relative;
    float: left;
}

#box-pink {

        width: 65px;
    height:65px;

    background-color: pink;

        border: none;

    position: relative;
    float: left;
}
        </style>
    <h1>YOU HAVE CHOOSEN THE ARROWHEAD DESIGN</h1><br><br>

            If you are viewing this page using<br>
            Internet Explorer 8 or earlier,<br>
            please except or apologies.<br>
            We are aware that the painting function<br>
            is not working in these browsers and we<br>
            are working on the problem.<br>
                Thank You!<br><br><br>

        <h2><b>NOW CHOOSE YOUR TYPE OF BOARDS</b></h2> 

        <br>
    <br>

<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">

<input type="hidden" name="on0" value="BOARD TYPE">

<select name="os0">

    <option value="REGULATION SIZE">REGULATION SIZE ( Most common - also used for tournament play) $85.00 USD</option>

    <option value="TOURNAMENT STYLE">TOURNAMENT STYLE ( All four sides closed when set up ) $130.00 USD</option>
    <option value="MEDIUM SIZE">MEDIUM SIZE (1/2 scale 12&quot; x 24&quot; - comes with ten 3&quot; bags) $45.00 USD</option>

    <option value="MINI BOARDS">MINI BOARDS  ( 6&quot; x 12&quot; Table Top - with ten 1-1/2&quot; bags) $30.00 USD</option>

</select>
<input type="hidden" name="on1" value="BOARD DESIGN">

<input type="hidden" name="os1" value="ARROWHEAD">

        <br>
    <br>

        <h2>NOW, LET'S PAINT YOUR BOARDS</h2><br>
        <h1><font style="color: red">Please use the color chart below.</font></h1>

        <br>
    <br>

                <div id="container">

        <div id="boardleft">

                <div id="box-a">

    <span Id="arrow">

</span>

    <span Id="arrow2">

</span>

            <div Id="circle">

</div>
            </div>

</div>

    <span id="boardleft">

    <b><u><h3>FIELD 1 COLOR</h3></u></b><br><br>

        <input type="hidden" name="on2" value="FIELD 1 COLOR">      

<h3>
<select name="os2">

<option name="os2" value="">
<option name="os2" value="GREY" onclick="colorchange1()"> 1</option>

<option name="os2" value="ORANGE" onclick="colorchange2()"> 2</option>

<option name="os2" value="YELLOW" onclick="colorchange3()"> 3</option>

<option name="os2" value="GREEN" onclick="colorchange4()"> 4</option>

<option name="os2" value="BLUE" onclick="colorchange5()"> 5</option>

<option name="os2" value="BROWN" onclick="colorchange6()"> 6</option>

<option name="os2" value="RED" onclick="colorchange7()"> 7</option>

<option name="os2" value="WHITE" onclick="colorchange8()"> 8</option>

<option name="os2" value="BLACK" onclick="colorchange9()"> 9</option>

<option name="os2" value="PINK" onclick="colorchange10()">10</option>

</select>
</h3>

    </span>

        <div id="boardright">

                <div id="box-a2">

    <span Id="arrow-a">

</span>

    <span Id="arrow-a2">

</span>

            <div Id="circle">

</div>
            </div>

</div>

    <span id="boardright">

    <b><u><h3>FIELD 2 COLOR</h3></u></b><br><br>

        <input type="hidden" name="on3" value="FIELD 2 COLOR">

<h3>
<select name="os3">

<option name="os3" value="">
<option name="os3" value="GREY"  onclick="changearrow1()"> 1</option>

<option name="os3" value="ORANGE"  onclick="changearrow2()"> 2</option>

<option name="os3" value="YELLOW"  onclick="changearrow3()"> 3</option>

<option name="os3" value="GREEN"  onclick="changearrow4()"> 4</option>

<option name="os3" value="BLUE"  onclick="changearrow5()"> 5</option>

<option name="os3" value="BROWN"  onclick="changearrow6()"> 6</option>

<option name="os3" value="RED"  onclick="changearrow7()"> 7</option>

<option name="os3" value="WHITE"  onclick="changearrow8()"> 8</option>

<option name="os3" value="BLACK"  onclick="changearrow9()"> 9</option>

<option name="os3" value="PINK"  onclick="changearrow10()">10</option>

</select>
</h3>
    </span>

        <span id="colorchart">

            <div id="box-grey"><p class="numbers_black">1</p></div>
            <div id="box-orange"><p class="numbers_black">2</p></div>
            <div id="box-yellow"><p class="numbers_black">3</p></div>
            <div id="box-green"><p class="numbers_black">4</p></div>
            <div id="box-blue"><p class="numbers_white">5</p></div>
            <div id="box-brown"><p class="numbers_white">6</p></div>
            <div id="box-red"><p class="numbers_black">7</p></div>
            <div id="box-white"><p class="numbers_black">8</p></div>
            <div id="box-black"><p class="numbers_white">9</p></font></div>
            <div id="box-pink"><p class="numbers_black">10</p></div>

          </span>

</div>

A:

This may not be a complete answer as the question, as stated, hasn't narrowed down the problem much.  Nonetheless...
At least part of the problem is that you want to use the onchange event for your SELECT element, rather than onclick on the OPTION elements within the SELECT.  
Here's a link to a jsfiddle demo:

Set 1 will display a message box in Chrome and Firefox
Set 2 will only display a message box in Firefox (at least in the versions I'm using)

(Sorry, didn't test IE)
Update:  If you're willing to use and learn jQuery, here's another jsfiddle demo that does color selection as I think you want it to.

