CODEWITHSUNDEEP
cssinternet-explorerinlinecompatibility
Cobra_Fast
Cobra_Fast

Reputation: 16061

How to give Internet Explorer different CSS lines?

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.

Upvotes: 0

Views: 999

Answers (4)

thirtydot
thirtydot

Reputation: 228162

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

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

Upvotes: 0

Alex
Alex

Reputation: 9031

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

Upvotes: 2

RoToRa
RoToRa

Reputation: 38400

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.

Upvotes: 0

Peeter
Peeter

Reputation: 9382

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/

Upvotes: 1

Related Questions