IE7 and inline-block fix

IE7 and inline-block fix

By Jonathan on December 13, 2011

Firstly, all of us web developers know that when it comes to developing, IE is probably the hardest to optimise for so most of us develop primarily within another browser such as Firefox, Safari or my personal preference of Chrome. It’ll be a dream for us web developers if IE kindly gave up, sadly I can’t see this happening any time in the near future. Whilst working on a Website Design I came across this inline-block issue.

Moving on to the problem in hand the display:inline-block element doesn’t function correctly within IE7. Although some developers say “why bother” with IE7, there is still a portion of users, albeit around 4%, are still using IE which would mean that 4% of users would instantly be lost if the website did not function correctly. The inline-block property within IE is abandoned due to the hasLayout property that is default in IE7, this property can’t be turned off easily either… Brilliant!

So to simply ‘fix’ the hasLayout firstly you’ll need to add “*zoom:1;” to anything that you are having inline-block issues with. Remember you’ll need the asterisk in front of line, class or id of any element that you only want IE7 to read. Thankfully this is in place so that we can easily target IE7 from our CSS, thank the heavens!

We are nearly there, hasLayout is also set to display:block by default. If you tried to change this to display:inline-block this still wouldn’t work, Sigh! Again, just for IE you need to include “*display:inline” remembering the asterisk to target just IE7, or you’ll mess up your layout within other browsers.

That’s it, well for IE7 anyway. IE6 still wont work!

To get display:inline-block to work within IE6 do the same process as what we’ve done above and an extra line of code. For IE6 you’ll need to add all this code to the end of the style for it to work. Thankfully there is a another special character that you can use to target only IE6. You’ll need to also add the height property to fix the IE6 inline-block, so add “_height:30px;” to your code to get it to work. You can change the height to what you suits your needs. The underscore is the special character that we target IE6 so remember this or you’ll mess the rest of your browsers up.


Falkon blog post featured image for post - WordPress Templates

WordPress Templates

Ever wanted to customise a single page in WordPress with the template system but never knew how? Its simple with...