IE8 display inline-block issue

Question

For some reason, IE-8 doesn't display my menu inline. (see picture attached) My code is:

#navigation #main-menu {
    display: inline-block;
    float: none;
    margin: 0 auto;
    padding: 0;
    position: relative;
    text-align: center;
    line-height: 18px;
    font-size: 12px;
    list-style: none;
}

I have found the following post IE8 display inline-block not working. Tried adding the Doctype, as well as added this code:

<!-- [if lt IE 8]>
<style type="text/css">
  #navigation #main-menu {
  display: inline;
  }
</style>   
<![endif]-->

Still doesn't work, any advice? you can see a picture with the issue here: http://preciseos.com/PreciseOs/Untitled.jpg

Here is the html code:

<ul style="margin-top:20px;margin-right: 10%;" class="nav-collapse collapse" id="main-menu">
    <li class="active"><a href="#page-welcome">Home</a></li>                                              
    <li class=""><a href="#page-about">About</a></li>
    <li><a href="#page-features">Services</a></li>
    <li><a href="#page-work">Work</a></li>                       
    <li><a href="#page-contact">Contact</a></li>

You can also see the issue at www.preciseos.com.

Thanks, Oz

A little html and more css would be great, since now it's not clear which element exactly is the #main-menu, and what's going inside of it. — drip, Jan 05 '14 at 22:09

Amarnath Balasubramanian · Answer 1 · 2014-01-06T10:47:28.387

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

Why dont you add this?? which is the answer of your source. Give it try

IE8 will treat it as a block level element unless you use float

Note:

I posted doctype as comment but it was corrupted, so posting this as answer

Updated:

HTML

<ul id="main-menu">
    <li class="actives"><a href="#page-welcome">Home</a>

    </li>
    <li class="actives"><a href="#page-about">About</a>

    </li>
    <li class="actives"><a href="#page-features">Services</a>

    </li>
    <li class="actives"><a href="#page-work">Work</a>

    </li>
    <li class="actives"><a href="#page-contact">Contact</a>

    </li>
</ul>

CSS

 .actives {
     display: inline;
    padding:10px;
     float: left;
 }
 a {
     text-decoration:none;
 }

Demo

Surjith S M · Answer 2 · 2014-01-07T10:56:49.727

1

The reason it breaks the layout is IE8 does'nt support HTML5 Elements such as nav.

Instead you can use <div> tag or try including javascript Workaround HTML5shiv to support IE

edited Jan 07 '14 at 10:56

answered Jan 06 '14 at 10:44

Surjith S M

6,642
2
31
50

He doesn't use HTML5, there's no element in his html called nav – yuvi Jan 06 '14 at 14:20
@OzPorat Please try some fix I suggested and let me know – Surjith S M Jan 07 '14 at 09:02

score 0 · Answer 3 · answered Jan 06 '14 at 10:28

0

First, make sure you target the li element with your selector

#navigation #main-menu li

as well try using float instead of display: inline;

#navigation #main-menu li {
    display: block;
    float: left;
    margin-right: 10px;
}

answered Jan 06 '14 at 10:28

jjgrainger

99
1
2

score 0 · Answer 4 · edited May 23 '17 at 11:50

As Surjith SM said, the IE8 doesn't support HTML5 elements such as nav. The problem was solved by adding the following code:

<!--[if lte IE 8]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

html5shi(m|v) creates doc elements for all the html5 elements so the styles from your CSS can kick in. Default behaviour for IE is to ignore unknown elements. For more info see header/footer/nav tags - what happens to these in IE7, IE8 and browsers than don't support HTML5?

IE8 display inline-block issue

4 Answers4