Damn IE7 and inline-block

Damn you Microsoft damn you to hell you are just seriously ticking me off now. Still working on this charity website and I've set the menu bar up using list elements, this is a neat way of doing things as they lend themselves well to orientation for non-visual browsers as well as being easy to shift around. However by default they line up vertically one atop another, if you want them to line up horizontally you can do one of two things - you can either float them or you can make them inline.

Float seems to be the first option of many coders, but it comes with a price - the element you're floating is removed from the default ordering system it's 'floated' over the top of them. So if you want more than one element side-by-side you have to float them all and to keep them straight enclose them in their own container; not pretty.

The other better method is to use make them inline, inline is simply what you're seeing now as you read, each word naturally follows the other in a horizontal line; however the reason most people use float is because an inline element grows and shrinks according to its contents, fine if that's what you want, not good if you want to create a fixed height/width 'block'.

So the solution is to use a new property called inline-block, this has all the advantages of the inline property while allowing you to apply block properties to it - yay!

Except IE7 doesn't understand inline-block properly.

It's to do with a hidden property called hasLayout the mention of which can cause seasoned web developers to tear their hair out, see you can't set it explicitly no such thing as hasLayout: on; it's set when other properties get applied and surprise surprise it's an IE only creation.

So to call this elusive hasLayout you need to set a property of "zoom:1;" to any element you want to work correctly. It doesn't do anything; if you set it to 2 it'll make things twice as large, but 1 nowt.

So that's that - nope, see if you set hasLayout as above for an element that is by default a block and then try to make it an inline-block IE7 still ignores it. So you need to add in one extra little snippet "*display: inline;" the star is important as every other correct browser will ignore that item, but dumb-old Internet Explorer won't and amusingly despite setting it to plain old inline it'll happily apply block properties to it too.

So is that all - still nope, because although that fixes IE7 it won't fix IE6 which requires a height be set to the element and that's added by "_height: 30px;" yep another funny character in front of the property this time one that IE7 and proper browsers ignore yet IE6 will apply.

So to get inline-block working for any element in Internet Explorer simply add "zoom:1; *display: inline; _height: 30px;" to the end of that elements style oh and yes change the height to whatever you need.