CSS inline-block hack for IE 7

There are times when I just want to rip my hair out because of certain browser inconsistencies… primarily those of Internet Explorer 7 and below. One of those is because IE7 doesn’t understand the property of display:inline-block;

Now before I get into my rant about anything IE related, let me first introduce why I’m having issues with IE(particularly IE7… I stopped supporting IE6 on all my webpages. Curse you IE6…curse you!).

A lot of web designers have been using list items to create navigational menus.

Attempting to use list items and having them display inline to create a horizontal navigation is commonly used. However, in the case of IE7, when you try and create a fixed width and height for various menu list items, the only way is to use display:inline-block; property.

Adding the zoom:1; enables a hidden property in IE7 called hasLayout (which is the reason behind IE7 not understanding an inline-block property)…however, you can’t call it out. Instead, you also have to add the property of display:inline; instead of display:inline-block; because IE7 still ignores it.