Back to Blog

How to fix the IE7 and inline-block CSS bug

While redesigning the previous Uncorked website to be responsive, we found that a few CSS bugs came along with it. One thing to remember, is that supporting Internet Explorer can be a hefty task in itself. Luckily, sometimes there are tricks to making all browsers happy.

Recently, we redesigned the Uncorked Studios website to be responsive to different browser and devices sizes. Along with the responsive design came a few CSS bugs. Here's one that involved the inline-block display in CSS.

Bug: Unordered list element using CSS display: inline-block won't align horizontally in IE7

When recently using the Blueberry responsive jquery image slider on the Uncorked homepage, the pager navigation along the bottom of the slider, which navigates between the featured images, uses display: inline-block to create a horizontal row. But of course, IE7 doesn't recognize _display: inline-block _and gave us this:

undefined

Fix: Add zoom:1 and *display: inline to the element in CSS (courtesy of The Mad Ranter)

Original CSS:

    .blueberry .pager li {
    display: inline-block;
    }

Copy to Clipboard

Fixed CSS:

    .blueberry .pager li {
    display: inline-block;
    zoom: 1;
    *display: inline;
    }

Copy to Clipboard

The asterisk (*) in front of display: inline allows for other browsers to ignore that line. Corrected appearance in IE:

undefined

Comments


Joe: thanks kelly, this worked great for us!
Tej and Rui: Thank you so much this took us forever to figure it out. You are a lifesaver.
James C: I just was testing in IE7 and noticed the bug with blueberry... However a quick google search is all it took to find your article and fix everything! Thanks again!!
Benet Hitchcock: Fantastic. Cheers Kelly. I'd been working on that one for hours.
notebook: dont work in ie 10, any suggestion?
Blair S.: Thanks Kelly. Just switched from Joomla 1.5 to 2.5 and pagination display was whacky. Thought I had it fixed until I dusted off an antique laptop and checked the site in IE7. All vertical. Your bit of code fixed it!
Nam-Chi Van: Thank you!!!! IE7 can be so frustrating at times...
Scott: Better solutions to styling IE: 1) give the HTML tag a browser-specific class (a la HTML5-boilerplate) or 2) use IE conditionals statements to provide additional IE7 style rules. Both are common alternatives to special-character CSS hacks (which are quickly dying, thank goodness.)
nico: OH! you dont know how happy and thankfull am i with this post! i dont have enough key in my keyboard to thank you!
Dominick: thanks, helped me solve a work problem! here's hoping IE7 goes the way of IE6: into the fires of Mt. Doom.
Julien: It works perfectly for me ! Thanks for the post.
mac: Thank's Kelly :)
Louis Doyle: Thanks, Worked great for me have been looking for something like this for a while.
Aj: Works for me! I've been cracking my head for so long till I found this solution of yours. Thanks!
Jorge: THE BEST!!! THANKS A LOT!! ;)
Blair Cameron: Thanks for this! Just fixed half an hour of development time. You rock.
Andrew: This is a really elegant solution. Worked like a charm -- thanks for sharing, Kelly!
Nicole Rose: Awesome, this made my day. Very happy to not have to add anything to the IE conditional css file. Thank you!
Sternwolf: better solution is change DIVs to SPAN or A, and then all works without any hacks
Andy: Thank you, you are awesome. I was working on a site for a client and this fixed it perfectly.
Elad: Thanks a bunch man! You found a solution to my annoying problem! :)
Rudi: Ahh I'll remember this one for next time, I just fixed mine by using float:left instead of display:inline-block - this seemed to do the trick as well...
Skweekah: Thanks for sharing. I had left out my doctype for testing, and sure enough, that was the issue. I didnt need a hack whatsoever.
Izdelava strani: Thank you, it worked in my case.
jay: Really super like you Kelly
JD Cutter: What a simple solution. I'll store that away in case I ever need it. Thank you.
Éder: You saved me several minutes.
ben: works for me thanks. If you are using sass and compass, you can just call in a mixin
VAle0: Thanks Kel. searched so many but this worked like a piece of cake :)
Marco: Thanks!
Kevin: This zoom:1 is a life saver! Not only did it help with an IE7 background image that wasn't showing up but we were having problems with tab based navigation. Problems solved.
Robin: Thanks Kelly, Worked for me very happy. I had to align something center, in the table based layout which was making me mad. Your solution helped me. THnx.
Joe: Thanks for posting this. Appreciate it.
Jeroen: Thanks, lifesaver
Diego: merci beaucoup
Michael Ebbage: That worked perfectly, without any tweaking required. Thanks for taking the time to document the issue you found - it's saved all of us time! :D
Simon: Nice !
Rick: Great thanks :)
Scott petrovic: Just used it. Worked like a charm. Thanks for the concise post. No rambling.
Paul K: This got me out of a jam on my site at work. Thanks a lot.
Pabbles: Worked great, thanks! We usually ignore ugliness in IE7, but we still have to keep it functional ^_^
Balka: This working just perfect ! Thanks a lot mate
Nirav: works perfect !! thank you.
Marc Ferguson: Awesome post. That trick fixed my problem. Kudos.
P: Thanks for posting this solution, it worked!

by Kelly DeChiaro

December 13, 2011

ie bugs, mobile web

No Comments