CODEWITHSUNDEEP
cssinternet-explorer-8
tdh87
tdh87

Reputation: 585

IE8 display inline-block not working

Say I have the following code

<style type="text/css" media="all">
  span, ul, ul li {
    display: inline-block;
    vertical-align: top;
    margin: 0;
    padding: 0;
    list-style: none;
  }   
</style>
<span>i would want</span>
<ul>
  <li>this</li>
  <li>on</li>
  <li>one line.</li>
</ul>

I want this to display inline in IE8. Everywhere I have read everything says this should work, IE8 supports inline-block. However after a morning of trying I cant get the above to line up. I know I could float it, but with the other elements on my page (not shown here) I would need to use a 'clearfix' which is more mark up. I only need to target IE8 and would love to know why inline block doesn't work for me when apparently its supported. The above code does what I want when viewed in Google Chrome.

Upvotes: 49

Views: 100128

Answers (7)

Idra
Idra

Reputation: 5797

In my experience it is always a better idea to use the universal way (IE6+) of declaring an inline block. Even if you are targeting newer browsers every time I've tried to say that it's only supported by newer browsers some client still messes with their document type, and then the sales say, it needs to be fixed, because clients can still see it and does not get it, that it's down to their IE settings and not our fault. More over when you are using inline-blocks for structural stuff, it keeps the site from completely disintegrating if the user is viewing the site on an older IE for what ever reason. 

display: inline-block;
*zoom: 1;
*display: inline;

Upvotes: 13

cato_minor
cato_minor

Reputation: 673

Not all IE8 versions seem to work equally. I found that the given code, even with a DOCTYPE, does not work in IE 8.0.6001.18702, which is an early version.

However, the workaround for lower IE versions did its job on that particular IE 8 as well:

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

Upvotes: 37

mentat
mentat

Reputation: 2768

You can set margin-right:1px

worked for me pretty well.

Upvotes: 18

Christopher
Christopher

Reputation: 10627

Note that IE8 will act like IE7 if you are viewing an intranet site, which can happen as you develop! See this StackOverflow question:

IE8 Rendering as IE7 By Default?

Upvotes: 5

John Anastasio
John Anastasio

Reputation: 169

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

.divInlineBlock
{
   display: inline-block;
   float: left;
}

Upvotes: 9

Jason
Jason

Reputation: 7682

For IE8 - you can add a specific declaration:

display: inline-table;

which works great.

Upvotes: 3

Patrickdev
Patrickdev

Reputation: 2381

I'm guessing you haven't declared a doctype. Try placing this on the first line, before the html tag:

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

The code you pasted works in IE8 with that doctype.

Upvotes: 50

Related Questions