My issue with this page is that the "High School", "Middle School", and "Elementary School" images center perfectly in all browsers except for IE6, 7, and 8.
Relevant parts of the page: (Edited for clarity)
CSS:
#block {
clear: both;
width: 682px;
}
.education_level_wrapper {
float: left;
width: 100%;
}
.education_level {
margin-bottom: 3px;
margin-left: auto;
margin-right: auto;
display: block;
}
HTML:
<div id="block">
<div class="education_level_wrapper">
<img src="[sniped]/Title_HS.png" class="education_level" />
</div>
</div>
IE:
Chrome:
What am I doing wrong here?
EDIT:
See the fixed version here: Non-Archived Graphic. The above link was a snapshot to stay consistent for archival purposes.