CSS inline-block hack for IE 7

March 27, 2012 in Tutorials

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.

<ul id="nav">
<li class="about"><a href="/home">Home</a></li>
<li class="press"><a href="/about">About</a></li>
<li class="team"><a href="/store">Store</a></li>
</ul>

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.

#nav li {
display:inline-block;
margin:0;
padding:0;
width:100px;
height:30px;
list-style:none;
text-align:center;
}

But of course almost all other browsers except for IE7 understands it(actually IE7 does understand it but only on elements with natural display:inline;).

The only way IE7 can understand and display it correctly is if you add zoom:1; and *display:inline;

#nav li {
display:inline-block; //for all other browsers
zoom:1;
*display:inline; //for IE7
margin:0;
padding:0;
width:100px;
height:30px;
list-style:none;
text-align:center;
}

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.

That’s it! Your menu list items should now be viewed properly in IE7.

 

Other Articles You Might Like:

• How to Target IE6, IE7, and IE8 in CSS

Tags: CSS, hack, IE7, inline, inline-block