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 <li> 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:
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;
}
Fixed CSS:
.blueberry .pager li {
display: inline-block;
zoom: 1;
*display: inline;
}
The asterisk (*) in front of display: inline allows for other browsers to ignore that line.
Corrected appearance in IE:
thanks kelly, this worked great for us!
02.27.12 at 12:31 pm
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.)
04.18.12 at 2:40 pm
It works perfectly for me !
Thanks for the post.
07.23.12 at 1:52 am
Thank’s Kelly :)
09.01.12 at 2:02 am
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!!
09.14.12 at 9:47 am
Thank you so much this took us forever to figure it out. You are a lifesaver.
09.27.12 at 8:16 am
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…
10.15.12 at 1:31 am
better solution is change DIVs to SPAN or A, and then all works without any hacks
10.27.12 at 3:43 pm
You saved me several minutes.
11.08.12 at 3:04 pm
Thanks for sharing.
I had left out my doctype for testing, and sure enough, that was the issue. I didnt need a hack whatsoever.
11.20.12 at 6:44 pm
Thank you, it worked in my case.
11.22.12 at 3:51 am
Really super like you Kelly
11.22.12 at 10:49 pm
Thank you, you are awesome. I was working on a site for a client and this fixed it perfectly.
12.01.12 at 6:39 pm
Thanks a bunch man! You found a solution to my annoying problem! :)
12.17.12 at 10:08 pm
Thank you!!!! IE7 can be so frustrating at times…
12.20.12 at 9:58 am
Thanks, Worked great for me have been looking for something like this for a while.
12.28.12 at 10:48 am
Works for me! I’ve been cracking my head for so long till I found this solution of yours. Thanks!
01.07.13 at 9:01 pm
THE BEST!!!
THANKS A LOT!! ;)
01.08.13 at 3:23 am
Thanks for this! Just fixed half an hour of development time. You rock.
01.08.13 at 5:36 pm
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!
01.15.13 at 6:11 pm
Fantastic. Cheers Kelly. I’d been working on that one for hours.
01.15.13 at 7:39 pm
Pingback: James Boelen » IE7 inline-block Fix | Software Developer
thanks, helped me solve a work problem!
here’s hoping IE7 goes the way of IE6: into the fires of Mt. Doom.
01.16.13 at 2:13 pm
dont work in ie 10, any suggestion?
01.17.13 at 12:55 am
OH! you dont know how happy and thankfull am i with this post! i dont have enough key in my keyboard to thank you!
01.22.13 at 10:57 am
Thanks!
02.04.13 at 3:30 am
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.
02.04.13 at 11:02 am
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.
02.20.13 at 5:48 pm
Thanks Kel. searched so many but this worked like a piece of cake :)
02.20.13 at 9:27 pm
Thanks for posting this. Appreciate it.
02.25.13 at 6:13 am
Thanks for posting this solution, it worked!
03.18.13 at 6:53 am
Thanks, lifesaver
03.21.13 at 3:29 am
Great thanks :)
04.12.13 at 8:31 am
Just used it. Worked like a charm. Thanks for the concise post. No rambling.
04.18.13 at 9:03 am
works for me thanks.
If you are using sass and compass, you can just call in a mixin
04.23.13 at 9:11 am
Awesome, this made my day. Very happy to not have to add anything to the IE conditional css file. Thank you!
04.23.13 at 12:04 pm
Awesome post. That trick fixed my problem. Kudos.
05.07.13 at 10:54 am