Go back

Inline Block not quite Inline-blocking in IE8

So we have been working on a site that has a good amount of buttons on it, but input buttons aren't that easy to make look nice.

So i've been round the site fitting snazzy buttons built out of anchors and spans with backgrounds to complete the look.

We've made use of the 'Inline-block' setting of the display css style. It looks proper nice in Firefox, Safari, Chrome, and Internet Explorer 7.

But.

Internet Explorer 8 makes a right meal out of it!

image

All buttons that are next to each other appear stacked on top. IE8 seems to have a problem coping with 'Inline-block' elements.

However, there is a quick fix it would seem, to this stacking issue. All that is needed to get Internet Explorer 8 to honour the 'Inline-block' style is add a 'margin-right' of some value, like so:

image

and now all the browsers render the buttons nicely:

image

Got a project? Let's work together

Compsoft is a remote working company except for Thursdays when we work together from the Alton Maltings in Alton, Hampshire (UK). Our registered address is detailed below. We'd be delighted to have either a virtual chat with you or to make arrangements to meet in person.