Cross browser automatically expanding headings with backgrounds using css inline-block
Posted in Web Design on Thursday, 19th January 2012 at 4:27PM
Headings with background colours are a common design element of modern websites. Because headings are displayed as block by default, they will by nature stretch to fill the full available width of their containing element which is fine until you want them to have a background which only sits below the text and not the full width of the parent element. You may be able to use set widths to achieve something similar but this doesn't account for scaling text sizes or content generated by a client via their CMS which can change frequently.
In an ideal world the 'inline-block' declaration should cater for these eventualities by providing the styling capabilities of a block level element such as padding and margins, but with the 'expand-with-content' property of inline elements. Unfortunately, support for this property is patchy and unreliable on a lot of commonly used browsers but I came across this snippet of CSS which gets all browsers from IE6 onwards to behave - and it works like a charm every time.
width: auto; min-height:10px; display: -moz-inline-stack; display: inline-block; vertical-align: top; zoom: 1; *display: inline;
Of course you can apply this fix to any element, not just headings, but this is where I find myself wheeling it out time and time again.