CODEWITHSUNDEEP
htmlcssinternet-explorergoogle-chrome
Kees Sonnema
Kees Sonnema

Reputation: 5784

Div not aligned in the center in Internet Explorer 9

I'm working on a website and all looks fine in Firefox, Chrome etc. except for IE. I am using Ryan Fait's Sticky footer method and I have the following styles on my main div:

#bigcontent{
    width: 920px;
    margin: 0 auto;
    padding: 20px;
    background-color: #f0f0f0;
    /* etc etc */
}

Code for the footer:

.footer{
    background-color: #585858;
    color: #fafafa;
    padding-top: 20px;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    min-height: 220px;
    height: auto;
    width: 100%;
    box-sizing: border-box;
    -webkit-box-shadow: inset 0 4px 4px -2px #333;
    -moz-box-shadow: inset 0 4px 4px -2px #333;
    box-shadow: inset 0 5px 5px -2px #333;
}

I use <!DOCTYPE html> (html5 doctype) I really don't know what the problem is.

The strangest thing is. My homepage is centered well. i don't use the #bigcontent on that page so it should be a problem with that specific div.

Screenshots of how it looks:

-- Removed images --

Upvotes: 1

Views: 3844

Answers (2)

Maloric
Maloric

Reputation: 5625

Have you tried forcing IE into standards mode? Add this to the <head> of your page:

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

Upvotes: 4

user1823761
user1823761

Reputation:

I think that you are seeing the website with IE in Compatibility Mode. Press F12 and check Browser Mode.

Upvotes: 0

Related Questions