Question

Hi I have created an h3 which is centered and uses a background-image and padding. It appears fine in all browsers (i.e. the h3 is the width of the text within it, plus the padding) except IE7, where the h3 seems to default to 100% width. I don’t want to set a static width as I need it to resize depending on the text. Any ideas? Here is the site:

• http://www.firecrestmoto.co.uk/index.php (it’s the “Our Latest Arrivals” text)

h3.bannerh3 {
    font-family: "alternate-gothic-no-1-d",sans-serif;
    font-style: normal;
    font-weight: 400;
    color: #fff;
    text-transform: uppercase;
    font-size: 64px;
    height: 78px;
    display: inline-block;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 10px;
    position: relative;
    text-shadow: 0px 0px 10px #000000;
    filter: dropshadow(color=#000000, offx=0, offy=0);
    background: url('../../../../img/h2top3.png') repeat-x top, url('../../../../img/h2bottom3.png')  repeat-x bottom;
    -pie-background: url('/img/h2top3.png') repeat-x top, url('/img/h2bottom3.png')  repeat-x bottom; /*PIE*/
    behavior: url(js/pie/PIE.htc);
}

Answer 1

You cannot use inline-block in IE7. Try the following instead:

display: inline-block;
zoom: 1;
*display: inline;

The second display property will be interpreted by IE7, and will set the element to inline. Unfortunately this will prevent you from having the style exactly as you’d like it in IE7 since inline and inline-block aren’t identical.

If further styling is desired, conditional comments may be more appropriate:

<!--[if lte IE 7]>
    <style type="text/css">
        h3.bannerh3 {
          display: inline;
          /* Additional styles here */
        }
    </style>
<![endif]-->