Navbar Centered In FF 22 Chrome 27 but Not IE 8

Question

My Navigation bar is centered and works perfectly in Firefox 22 and Chrome 27 but not IE 8, I hate to be that guy but what gives?? Wouldn't it be great if everything just played nice, if this wasn't work related I wouldn't care, but we are stuck using IE. Is there some kind of resource for cross-browser compatibility or is it just trial by fire??

CSS Markup

body
{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    margin: 0;
    padding: 0;
}
.container
{
    width: 1004px;
    margin: 0 auto;
    text-align: center;
}
.navigation
{
    text-align: center;
    display: inline-block;
    list-style-type: none;
    text-align: center;
}
.navigation li
{
    float: left;
    width: 150px;
    position: relative;
}
.navigation li a
{
    color: #fff;
    display: block;
    padding: 8px 7px 8px 7px;
    text-decoration: none;
    border-top: 1px solid #F2861D;
    background: #262626;
    text-align: center;
    text-transform: uppercase;
}
.navigation li a:hover
{
    color: #F2861D;
}
.navigation ul
{
    position: absolute;
    left: 0;
    display: none;
    margin: 0 0 0 -1px;
    padding: 0;
    list-style: none;
    border-bottom: 3px solid #F2861D;
}
.navigation ul li
{
    width: 150px;
    border-top: none;
}
.navigation ul a
{
    display: block;
    height: 15px;
    padding: 8px 7px 13px 7px;
    color: #fff;
    text-decoration: none;
    border-top: none;
    border-bottom: 1px dashed #6B6B6B;
}
.navigation ul a:hover
{
    color: #F2861D;
}

HTML Markup

<div class="container">
    <div class="navigation">
        MY NAVIGATION
    </div>
</div>

score 0 · Answer 1 · edited May 23 '17 at 12:28

0

Use this in the top of document:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Or, if possible:

.container{
   width:100%; //auto
   margin:0 auto;
   text-align:center;
}

Related question:

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

edited May 23 '17 at 12:28

Community

1
1

answered Aug 02 '13 at 13:45

daniel__

11,633
15
64
91

Ok I've added to the top of the document and my navbar is still on the left side of the page rather than centered, any other thoughts?? Changing the width to 100% doesn't seem to have any effect either, but thank you for the reply. – Aug 02 '13 at 13:50
@DrewG just add the doctype, copy and paste the code here: http://htmledit.squarefree.com/ - you will see – daniel__ Aug 02 '13 at 13:57
It looks fine when it displays in the real time HTML editor, however that doesn't explain why its stuck on the left hand side when loaded in my IE 8 browser – Aug 02 '13 at 14:15
I'm running 8, I tried on another machine running 6 and both look the same, I don't see how it can look right for you?? – Aug 02 '13 at 14:52
@DrewG See this question: http://stackoverflow.com/questions/662341/using-margin-0-auto-in-internet-explorer-8 . Your problem is the same. – daniel__ Aug 02 '13 at 15:17

Navbar Centered In FF 22 Chrome 27 but Not IE 8

1 Answers1