No inline-block turns inline elements into elements that display as an inline-block (not display:block) - they are different things. But yes you can use it on elements that are natively inline in IE without the need for hacks.
but you can’t use display:inline to convert block elements to inline elements… correct??? but you can use the hacks you mention and this will work fairly reliably for IE6+7??
No you can’t turn block elements into inline-block elements in IE7 and under by using display:inline-block. You have to use the hacks I mentioned.
You seem to be misunderstanding the display values a little and there are three values that we are talking about as follows (although there are many more):
display:inline
display:inline-block
display:block
I also note that in your main stylesheet you have this:
body li {
display:inline-block;
}
It is unlikely that you want all lists top be inline-blocks so I would remove that. Lists are display:list-item by default which is a kind of block display but with markers. Otherwise all your lists will be horizontal which is rarely what you want. Just code them on a case by case basis as required.
so this is the page in question:
my friend’s page
yesterday when I looked in IE7 (the computer at the gym was running IE7, fortunately…) the global-nav links across the top were also messed up…
so applied your hack…
your hacks are in lines 48-49, 58-59 and 69-70 in css:
http://andreahegeman.com/css/style.css
(now for the first one, since am not setting dimensions (line 47 in css)
div#header ul li {display:inline; }
should work for all browsers? but it wasn’t working yesterday on IE7…
That would set IE7 to inline-block because of the previous global rule for body li{display:inline-block} that I mentioned above where haslayout was set using inline-block.
could someone reading this with the capability pls test this pg on IE6 & 7… (and one of the gallery pgs, for the gallery text-links at top of each pg…)
thank you very much…
That seems to be working in Ie7 and under for me ok anyway.
on a more general note, given all this, and the fact that now I can’t always test on IE6+7, I think from now on, especially if I know all li’s will be same height, I will do with floats…
any issues I should expect for IE6+7 if I use simple floats with left/right margins?
thank you very much…
You can’t center floats which is usually why inline-block is used instead (and when elements are a different height because floats will snag).
When using floats you need to watch out for the double margin bug in IE6 where the side margin will be doubled if the edge is adjacent to the containing block. The fix is to add display:inline also which cures the bug (but is actually nonsense as floats have a block display by default and cannot be changed with css).
(PS: the concept of haslayout still confuses me… I’ve never been able to fully grasp what this ‘haslayout’ is exactly… “makes it inline but haslayout is still preserved which means it behaves like inline-block” not sure what you mean… )
Haslayout is clearly defined in the reference here with advice on its use and the “haslayout trip switch” effect was clearly defined in Claire’s page I linked to. The display:inline-block applies haslayout to an element (it’s only real use in IE) but the element maintains haslayout even when the display is set back to display:inline in a new rule. Haslayout is lost if the display:inline exists in the same rule as the display:inline-block - that’s the trip switch effect Claire mentions in the link I posted.
I notice that you are mixing a lot of properties that don’t go together so it seems you are still a little confused. If an element is absolutely positioned then it can’t be floated because absolute positioning wins out.
If an element is floated then it can’t be display:inline-block because float wins out.
