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: