Built-in IE8 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. Wherever I read, everything says this should work, IE8 supports an inline unit. However, after waking up in the morning, I cannot get the line above. I know that I can pop it up, but with other elements on my page (not shown here) I will need to use "clearfix", which is more markup. I only need to configure IE8 and it would be interesting to find out why the inline unit does not work for me, when, apparently, it is supported. The code above does what I want if you are viewing it in Google Chrome.
I assume you did not declare doctype. Try putting 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 this type.
Not all versions of IE8 work the same. I found that this code, even with DOCTYPE, does not work in IE 8.0.6001.18702, which is an early version.
However, a workaround for lower versions of IE did its job in this IE 8 too:
<!--[if lt IE 8]> <style type="text/css"> li { display: inline; } </style> <![endif]--> You can set margin-right: 1px
worked for me pretty well.
In my experience, it is always better to use the universal way (IE6 +) of declaring an inline block. Even if you focus on new browsers every time I try to say that it is supported only by newer browsers, some client will still ruin their document type, and then, according to sellers, it needs to be fixed, because clients are still they can see it and don’t understand that it depends on the IE settings, and not on our mistake. Moreover, when you use the built-in blocks for structural elements, it does not allow the site to completely disintegrate if the user views the site in an older IE for any reason.
display: inline-block; *zoom: 1; *display: inline; IE8 will consider it as a block level element if you do not use float.
.divInlineBlock { display: inline-block; float: left; } Please note that IE8 will act like IE7 if you are browsing an intranet site, which may happen as it develops! See this StackOverflow question:
IE8 rendering as IE7 by default?
For IE8 - you can add a specific declaration:
display: inline-table;
which works great.