CODEWITHSUNDEEP
htmlinternet-explorercss
thatidiotguy
thatidiotguy

Reputation: 8991

IE8 and Below inline-block CSS

So I know that IE8 and below does not like inline-block but I read that inline should result in the same behavior. So I modified copied my main.css to main-ie8below.css and changed all inline-block to inline. I use the following code to try and achieve this:

        <!--[if lte IE 8]>
            <link rel="stylesheet" type="text/css" href="/media/css/main-ie8below.css" />
        <![endif]-->
        <!--[if gt IE 8]>
            <link rel="stylesheet" type="text/css" href="/media/css/main.css" />
        <![endif]-->
        <!--[if !IE]><!-->
            <link rel="stylesheet" type="text/css" href="/media/css/main.css" />
         <!--<![endif]-->

However, this is not working. It seems that my if statements are incorrect. Is that the case, or am I missing something else?

Here is the HMTL in question (useless stuff removed):

    <nav id="main_nav" role="navigation"><!--
                            <div><a href=""><img src=""  /></a></div><!--
                    --><div><a href=""><img src=""  /></a></div><!--
                    --><div><a href=""><img src=""  /></a></div><!--
                    --><div><a href=""><img src=""  /></a></div><!--
                    -->

Here is a fiddle, except without images:

http://jsfiddle.net/bqXsU/

Upvotes: 0

Views: 5327

Answers (2)

thatidiotguy
thatidiotguy

Reputation: 8991

It turned out to be the fault of HTML5 elements not being recognized by IE8. By adding HTML5shiv I was able to fix it.

Upvotes: 0

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167172

You need to use this way:

display: inline;
zoom: 1;

I guess you missed the zoom: 1 part. And if you are coupling with the existing stylesheet, which goes for all the IE versions and modern browsers, it is good to use this way:

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

But the problem is that, your CSS might not validate.

I don't understand, which part is the one you didn't understand. Let me explain the three things I used.

  1. Star Hack: Prepending a * in front of the style rule, will make it only visible to IE 7 and below.
  2. Validation Issue: The rules *zoom and *display are not valid CSS properties.
  3. How does this work? In IE 7 and below, this zoom: 1; will trigger the hasLayout property of the element, thereby making it available the width, height, margin and padding.

Upvotes: 3

Related Questions