1

I can't seem to center my navigation or footer in IE8. I had to float my navigation just to get the dimensions to show correctly in IE8. I'm using divs for the footer and nav because I know this language isn't going to be translated in IE8 and I'm still having issues. Below is the CSS that I am using for my footer, which works fine in Firefox and Safari. Also, I need this to be stationary so it somehow needs to involve margin: 0 auto; my issue can be viewed at http:www.vslateart.com/index.html (homepage alignment) 

.footer {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 200px;
}

Is there any sort of workaround so that this can translate to IE8?

vslateart
  • 15
  • 5
  • `margin: 0 auto` works fine even on IE7 so your problem must be somewhere else. please provide a link to a fiddle that shows the issue. – Fabrizio Calderan Feb 20 '15 at 16:59

3 Answers3

0

I think you want to do this 

.footer{
    position: absolute;
    display:block;
    width: 200px;
    margin-left: -100px;
    left: 50%;
}

This should do the trick! margin-left shoud be negativ and the width/2 so margin-left = (-1)*(width/2)

The position could be relative(may work better)

EDIT

I use this code to center my homepage 

    position: absolute;
    width: 1000px;
    min-height: 100%;
    margin-left: -500px;
    left: 50%;

This will make then window center until the window is 999px wide then it will missmatch. Then use something like this 

@media only screen and (min-width: 1000px){
    div.screen-size-wrapper{
        position: absolute;
        width: 1000px;
        min-height: 100%;
        margin-left: -500px;
        left: 50%;
    }
}
@media only screen and  (max-width: 999px){
    div.screen-size-wrapper{
        width: 100%;
        min-height: 100%;
    }
}

Tell me if this dosen't work :)

EDIT - This works for your webpage (i tried it)

Paste this in you container css

margin-right: auto;
width: 1200px;
margin-left: -600px;
left: 50%;
position: absolute;
Marcus Lagerstedt
  • 318
  • 5
  • 21
  • I also need this to be stationary like the rest of the page. Your suggestion has gotten me the closest but it moves when adjusting the screen. – vslateart Feb 20 '15 at 17:53
  • Ok here is the cod you should use in your container margin-right: auto; width: 1200px; margin-left: -600px; left: 50%; position: absolute; – Marcus Lagerstedt Feb 20 '15 at 23:36
0

Similar question: Using "margin: 0 auto;" in Internet Explorer 8

Your code looks perfectly valid.

Are you missing a doc type at the top of your page? Without the DOCTYPE, IE automatically goes into Quirks rendering mode. 

<!DOCTYPE html>

Failing that - have you set the width of your parent to be greater than the width of .footer?

Community
  • 1
  • 1
James
  • 442
  • 2
  • 13
  • I have it as !DOC TYPE html for html5 but unfortunately this is too new for IE8 to pick up. – vslateart Feb 20 '15 at 17:26
  • Are you using an HTML5 element such as
    or
    ? Have you also referenced the html5 shiv in your site to add support for IE8?
     – James Feb 20 '15 at 18:12
  • I am using divs instead of the html5 elements right now. Will the html5 shiv just allow IE8 to read html5 elements? – vslateart Feb 20 '15 at 18:39
  • No - it does add support for new elements but it also adds support for the new doc type. So if your using the new doc type without the shiv it could also be that causing you issues. – James Feb 20 '15 at 19:04
0

this code center a div to center (fiddle):

.footer {
    display: block;
    margin: 0 auto;
    width: 200px;
}
cbertelegni
  • 423
  • 2
  • 11