CODEWITHSUNDEEP
internet-explorer-8css
Oz Porat
Oz Porat

Reputation: 5

IE8 display inline-block issue

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

Upvotes: 0

Views: 4580

Answers (4)

Surjith S M
Surjith S M

Reputation: 6740

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

Upvotes: 1

Oz Porat
Oz Porat

Reputation: 5

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?

Upvotes: 0

Amarnath Balasubramanian
Amarnath Balasubramanian

Reputation: 9460

<!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

Upvotes: 1

jjgrainger
jjgrainger

Reputation: 99

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;
}

Upvotes: 0

Related Questions