CSS – display: inline-block in IE7

I was having some problems with getting the layout of the buttons for the JQuery Tools Scrollable Navigator plugin to work in IE7 for CSlide, e.g. https://learntech.imsu.ox.ac.uk/cslide/collections/index/87.

After a bit of searching I found this: http://fourwhitefeet.com/2009/02/css-display-inline-block-in-ie7/, so thanks to Cathy at http://fourwhitefeet.com.

It turns out that, in IE7, display: inline-block only works on inline elements, and I was trying to use it on divs. The trick is to wrap the content of these elements in an element that is natively displayed inline, e.g. span. For my purpose, I could just replace my divs with spans (they probably shouldn”t have been divs in the first place, but I’d mutilated the examples for Scrollable to gte where I was). It should also work by just adding spans around the content that you want to be ‘inline-block’, but inside the ‘block’ element, e.g.

<div><span style="display: inline-block">My Content</span></div>

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *


The reCAPTCHA verification period has expired. Please reload the page.