Home/ Questions/Q 971969
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-16T03:02:53+00:00

My HTML+CSS graphic My issue with this page is that the High School, Middle

  • 0

My HTML+CSS graphic

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:

alt text

Chrome:

alt text

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Prepend your page with <!DOCTYPE HTML> to get browsers to attempt to comply with the CSS spec.

    Right now you’re letting browsers render those pages as if this was 2001.

    Technical explanation is that, in IE6 quirks mode auto margin wont work without being in standards mode. The workaround if you HAVE to use quirks mode is to apply text-align:center on the parent element. But you should be using standards mode, aka sane mode.

    • 0