How to give Internet Explorer different CSS lines?

Question

Imagine I'm having a DIV. I want to display it in a row with other divs, so I'm giving it display: inline-block along with other style definitions in a CSS sheet.

Now Internet Explorer wants to have display: inline; for the behavior I want.

How do I give Internet Explorer a seperate styling command to overwrite the definition for good browsers, so only IE will have display: inline;. Due to technical limitations I cannot use <![If IE] -->-stuff in HTML, I need to stay within the CSS file.

Answer 1

You can use selectors like so:

\9 – IE8 and below, * – IE7 and below, _ – IE6

So in your case:

*display: inline;

You can simply add this to the rest of the css:

div{
display: inline-block;
// some;
// other;
// css;
*display: inline;
}

Read my blog post on this.

Update

IE version 5 till 8. (They are all affected) – Cobra_Fast 1 min ago

So in this case, you'd use

div{display\9:inline;}

Answer 2

A horrible way to do it is: http://www.webdevout.net/css-hacks

Even though you cannot change the HTML I'd read up on http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/

Answer 3

IE actually has quite good support for inline-block - if the element is originally an inline element. So try using a span instead of the div.

Answer 4

To make inline-block work on block-level elements in IE7, I frequently add this to my answers:

• Overlapping inline div
• One list, simple float left, different cell sizes
• How do I center a list as shown here?
• multi-line tabs
• Remove margin between rows of overflowing inline elements
• How can I wrap content around a UL CSS Menu so content is seamless?

I sure hope what I'm suggesting everywhere actually works :D

See: http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/

selector {
    display: inline-block;
    *display: inline;
    zoom: 1;
}