CSS and IE issues

HTML & CSS
1

Ive been testing my website. Looks good everywhere but in IE10, 9, 8…if you go to the site it looks like the header png, the nav, and the footer are all pushed over to the right about 150px. I tried using a separate IE stylesheet, but even when I change my margin percentage to try and get it pushed to the left, it seems like there is something that is blocking its capabilities to move over. I could really use a 2nd set of eyes at this point.

Heres the site: www.austincc.edu/writing

Thanks in advance!

2

Hi, colin27.

Beware of unnecessarily applied percent (or fixed) margins (or padding).

In this case, the container for the header image becomes narrower than the width of the header image at narrower window widths, so the image overflows to the right.

Change div#header as follows:


div#header-inner {
    [color=blue]width: 450px;[/color]
    [color=blue]margin: 0 auto;[/color]
}

The same thing is happening in the other sections. A fixed width block container is usually centered using {margin:0 auto}. An inline or inline-block container is usually centered by assigning {text-align:center} to its parent.

FYI: the code for the <ul> at the bottom of the page is invalid. The %bull; cannot reside outside of the <li> items.

3

Thanks for the reply ronpat, Im going to try your suggestions once I have IE testing capabilities tomorrow. Ah, yes…need to fix the &bull sections too. Thanks for the second set of eyes! Mind is mush…

4

Thanks again! Your advice really helped steer me in the right direction. Best :slight_smile:

5

Cool. Thanks for the feedback. Best to you, too :slight_smile: .