Hi,
You have a number of problems (some of which have already been mentioned above).
The main problem is the use of html5 elements whch IE8 doesn’t understand at all. You need to add the html5 shiv to fix this issue.
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
You would then need to set the html5 elements to block as they will be inline by default.
/* html5 elements*/
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, main {
display:block;
}
Next change to a valid doctype as the one you are using forces IE9 and under into quirks mode and behave much like IE5 and no css3 will work. As you are using html5 elements then use an html5 doctype.
<!DOCTYPE HTML>
It may also be worth forcing IE into standards mode regardless of doctype.
<meta http-equiv="X-UA-Compatible" content="IE=edge">
Then reset the ul margins and padding.
ul {
margin:1em 0;
padding:0;
list-style:none
}
After you have made those changes your page should look roughly like this:
<!DOCTYPE HTML>
<!--<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">-->
<html>
<head>
<!-- force IE8+ into standards mode -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Untitled</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
/* html5 elements*/
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, main {
display:block;
}
ul {
margin:1em 0;
padding:0;
list-style:none
}
</style>
<link rel="stylesheet" type="text/css" href="http://www.scic.com/css/c/style" >
<style>
#state_scroller {
height: 600px !important;
}
#state_scroller .states li {
float:left;
width: 25px;
}
#state_scroller .states #st_MX {
float:left;
width: 85px;
}
#state_scroller section li {
border: 1px solid #D7D7D7;
border-radius: 2px 2px 2px 2px;
margin: 0 3px 3px 0;
}
#state_scroller section li a {
background: none repeat scroll 0 0 transparent;
float: left;
margin-left: 0;
padding: 5px 0 4px;
text-align: center;
width: 100%;
}
#state_scroller section .active, #state_scroller section .active a {
background-color: #7D0140;
border-color: #7D0140;
color: #FFFFFF;
text-decoration: none;
}
#state_scroller section li:hover, #state_scroller section li a:hover {
background-color: #d18716;
border-color: #d18716;
color: #fff;
}
</style>
<script src="/assets/js/jquery-1.6.min.js" type="text/javascript"></script>
<script language="JavaScript" type="text/javascript">
$(document).ready(function(){
$('.state').click(function(event) {
if($(this).hasClass('active')) {
$(this).removeClass('active');
} else {
$(this).addClass('active');
}
});
});
</script>
</head>
<body>
<div class="content">
<div class="main" id="schedulePageId">
<div class="col1">
<table class="scheduleTable" border="0" cellpadding="0" cellspacing="0" id="test_table">
<thead>
<tr>
<th width="98px" class="lb">Location</th>
<th width="89px">Date</th>
<th width="175px">Program</th>
<th>Cost</th>
<th width="130">Information</th>
</tr>
</thead>
<tbody id="events_tbody">
</tbody>
</table>
</div>
<div class="col2">
<div class="whiteblock" id="right_div">
<div id="state_scroller">
<section class="states">
<input type="checkbox" value="OL" />
(Self-Paced Online Courses)<br />
<input type="checkbox" value="WB" />
(Instructor Led Online Courses)<br />
<ul style="list-style-type:none;-webkit-padding-start:10px;">
<li class="state" id="st_AL"><a href="#" title="Alabama">AL</a></li>
<li class="state" id="st_AK"><a href="#" title="Alaska">AK</a></li>
<li class="state" id="st_AZ"><a href="#" title="Arizona">AZ</a></li>
<li class="state" id="st_AR"><a href="#" title="Arkansas">AR</a></li>
<li class="state" id="st_CA"><a href="#" title="California">CA</a></li>
<li class="state" id="st_CO"><a href="#" title="Colorado">CO</a></li>
<li class="state" id="st_CT"><a href="#" title="Connecticut">CT</a></li>
<li class="state" id="st_DE"><a href="#" title="Delaware">DE</a></li>
<li class="state" id="st_DC"><a href="#" title="District of Columbia">DC</a></li>
<li class="state" id="st_FL"><a href="#" title="Florida">FL</a></li>
<li class="state" id="st_GA"><a href="#" title="Georgia">GA</a></li>
<li class="state" id="st_HI"><a href="#" title="Hawaii">HI</a></li>
<li class="state" id="st_ID"><a href="#" title="Idaho">ID</a></li>
<li class="state" id="st_IL"><a href="#" title="Illinois">IL</a></li>
<li class="state" id="st_IN"><a href="#" title="Indiana">IN</a></li>
<li class="state" id="st_IA"><a href="#" title="Iowa">IA</a></li>
<li class="state" id="st_KS"><a href="#" title="Kansas">KS</a></li>
<li class="state" id="st_KY"><a href="#" title="Kentucky">KY</a></li>
<li class="state" id="st_LA"><a href="#" title="Louisiana">LA</a></li>
<li class="state" id="st_ME"><a href="#" title="Maine">ME</a></li>
<li class="state" id="st_MD"><a href="#" title="Maryland">MD</a></li>
<li class="state" id="st_MA"><a href="#" title="Massachusetts">MA</a></li>
<li class="state" id="st_MI"><a href="#" title="Michigan">MI</a></li>
<li class="state" id="st_MN"><a href="#" title="Minnesota">MN</a></li>
<li class="state" id="st_MS"><a href="#" title="Mississippi">MS</a></li>
<li class="state" id="st_MO"><a href="#" title="Missouri">MO</a></li>
<li class="state" id="st_MT"><a href="#" title="Montana">MT</a></li>
<li class="state" id="st_NE"><a href="#" title="Nebraska">NE</a></li>
<li class="state" id="st_NV"><a href="#" title="Nevada">NV</a></li>
<li class="state" id="st_NH"><a href="#" title="New Hampshire">NH</a></li>
<li class="state" id="st_NJ"><a href="#" title="New Jersey">NJ</a></li>
<li class="state" id="st_NM"><a href="#" title="New Mexico">NM</a></li>
<li class="state" id="st_NY"><a href="#" title="New York">NY</a></li>
<li class="state" id="st_NC"><a href="#" title="North Carolina">NC</a></li>
<li class="state" id="st_ND"><a href="#" title="North Dakota">ND</a></li>
<li class="state" id="st_OH"><a href="#" title="Ohio">OH</a></li>
<li class="state" id="st_OK"><a href="#" title="Oklahoma">OK</a></li>
<li class="state" id="st_OR"><a href="#" title="Oregon">OR</a></li>
<li class="state" id="st_PA"><a href="#" title="Pennsylvania">PA</a></li>
<li class="state" id="st_PR"><a href="#" title="Puerto Rico">PR</a></li>
<li class="state" id="st_RI"><a href="#" title="Rhode Island">RI</a></li>
<li class="state" id="st_SC"><a href="#" title="South Carolina">SC</a></li>
<li class="state" id="st_SD"><a href="#" title="South Dakota">SD</a></li>
<li class="state" id="st_TN"><a href="#" title="Tennessee">TN</a></li>
<li class="state" id="st_TX"><a href="#" title="Texas">TX</a></li>
<li class="state" id="st_UT"><a href="#" title="Utah">UT</a></li>
<li class="state" id="st_VT"><a href="#" title="Vermont">VT</a></li>
<li class="state" id="st_VA"><a href="#" title="Virginia">VA</a></li>
<li class="state" id="st_WA"><a href="#" title="Washington">WA</a></li>
<li class="state" id="st_WV"><a href="#" title="West Virginia">WV</a></li>
<li class="state" id="st_WI"><a href="#" title="Wisconsin">WI</a></li>
<li class="state" id="st_WY"><a href="#" title="Wyoming">WY</a></li>
<li class="state" id="st_MX"><a href="#" title="Mexico">Mexico</a></li>
</ul>
</section>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
There are still errors where you have used deprecated presentational mark up but they will not affect the display as such but should be removed and css used instead.
The above works in IE8 now.