Help with horiz list in IE?

HTML & CSS
1

My horizontal unordered list at the bottom of this page is correct in Firefox/Safari, but not in IE 8. I am using display inline-block, which I was told does not work in IE7 so I put in a condition display:inline;zoom:1; which fixed it, but it seems to be doing the same in IE8 - the list items stack instead of listing horizontally. Can someone tell me what I’m doing wrong/what I can do to fix this? Thank you!

Example here:
http://www.redkettledesign.com/dev/digedge/index.php

2

You could just direct that ie style sheet to IE7 and under by changing the conditional comment to:

<!--[if [COLOR="Red"]lte IE 7[/COLOR]]>
        <link rel="stylesheet" type="text/css" href="ie7.css" />
<![endif]-->

“lte” means “less than or equal to”. So IE8 won’t get the styles.

3

Hi,

The problem is that you fed the ie7 stylesheet to ie8 as well:)

Change the cc to less than ie8 :


[B]<!--[if lt IE 8]>[/B]
        <link rel="stylesheet" type="text/css" href="ie7.css" />
<![endif]-->

Ie8 understands inline-block but you feed it display:inline which broke it.

IE6 and 7 treat inline elements as inline-blocks when they have haslayout which is what the zoom is for.

Edit:

Must learn to type faster …

4

excellent, that worked! I see the difference between the lt and lte also… took a minute for me to find the difference between what you two wrote :slight_smile:
thanks so much for the help!