Question

Hopefully this is something simple I am missing, I have an OL encompassing a set of LI links.
In Chrome and firefox this works perfectly, in IE8 they appear as a numbered list moving vertically down the page.

HTML:

<div class="header">
    <img src="images/header.png" alt="Logo">
    <ol>
    <li><a href="index.html">Home</a></li>
    <li><a href="page2.html">page2</a></li>
    <li><a href="page3.html">page3</a></li>
    <li><a href="page4.html">page4</a></li>
    <li><a href="page5.html">page5</a></li>
    <li><a href="page6.html">page6</a></li>
    <li><a href="page7.html">page7</a></li>
    </ol>
</div>

CSS;

.header {
   width:888px;
   height:119px;
   margin: 0 auto;
   margin-top: 20px;
   padding:0;
   text-align: left;
}
.header ol {
   margin-top: -32px;
   width: 888px;
   padding:0;
   margin-left: 10px;
}
.header li {
     font-weight: bold;
     display: inline;
     padding-right: 20px;
     padding-left: 20px;
     border-right: solid 1px;
     border-right-color: #FFFFFF;
}

Is there something basic I am missing here? Doing some searching doesn’t seem to provide me with a solution. There are some suggestions of using display: inline; on the LI but this doesn’t appear to make any difference.
The behaviour I am looking for is horizontal ordering of the links as displayed in Chrome and Firefox.

Answer 1

IE8 and lower versions of IE have trouble implementing display:inline on many block-level elements.

You could try to float the lis…

so remove the display:inline and replace with something like float:left