CODEWITHSUNDEEP
htmlcssinternet-explorercentering
Joshua Patton
Joshua Patton

Reputation: 472

IE not centering these images, is there a fix?

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.

Upvotes: 0

Views: 118

Answers (2)

Dora
Dora

Reputation: 292

The attribute float: left in education_level_wrapper function is the probable cause of this problem.

Use margin to adjust positioning rather than

float

Upvotes: 0

meder omuraliev
meder omuraliev

Reputation: 186662

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.

Upvotes: 1

Related Questions