Need this working in all browsers

HTML & CSS
1

I have a section of HTML where I separate the states into blocks (they are <li>'s) and allow the user to select them vs. having them in a drop down.


  <div id="state_scroller">
      <section class="states">
          <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>
              <!-- SNIPPED REST -->
          </ul>
      </section>
  </div>

It looks somewhat great in Chrome , Firefox, Opera and Safari.

But in IE8, I get this:

Here’s my CSS:


#state_scroller {
    display: block;
    overflow: auto;
    width: 338px;
    }
#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;
    }

What do I have to do to make IE show this like Chrome? Why does Firefox only show 9 per row vs. 10 like Chrome, Safari and Opera?

I moved the code to a standalone file that also uses my site’s stylesheet: http://www.scic.com/files/states.html

This looks good in Chrome, Safari, Opera, Firefox (but with only 9 columns) and IE10. In IE8, it looks like the image above.

2

Hmmmm. WebKit browsers fit, Firefox doesn’t.

Suspicious line of code:


ul style="list-style-type:none;-webkit-padding-start:10px;">

Try replacing that WebKit specific stuff with {ul padding-left:10px} (so all browsers can see it) and see what happens. :slight_smile:

Lists (ul and ol) have a default left padding as well as top and bottom margins. They are commonly reset to zero or changed to the desired values when coding a page.

3

Please validate your script using W3C Markup Validation Tools:

There are 6 errors and 7 warnings, also it is recommended to change the doctype to Html5.

Applying a charset, body font-size and body font-family overcomes the different browser default fonts. Also applying a width to the <ul ensures that the column count is identical on all browsers.

If you you still have layout problems after applying these recommendations then please supply the web-page.

4

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.:slight_smile:

5

Thanks, Paul, it works and I learned a few things.