[BNM] CSS image replacement techniques (H1s etc)

Andy Smith asmith at preview.co.uk
Tue Dec 13 18:31:26 GMT 2005

Nick Sayers wrote:
> What techniques do BNMers use these days? Any recommendations?

I usually use CSS that looks like this, which doesn't need an extra 
<span> or anything:

     element {
       display: block;
       background: #123456 url(image.png) top left no-repeat;
       width: 200px;
       height: 100px;
       padding: 100px 0 0 0;
       height/* */:/**/0;
       height: /**/0;
       overflow: hidden;

I can't remember where I picked this up from, or if I just came up with 
it based on the Leahy/Langridge method. It's a variant of that method 
that uses one of the "alternate box model hacks" from:


I prefer this version because it doesn't use '! important', so it's less 
likely to interfere with other rules that affect the element's height. 
The main problem is that it doesn't work with "images off, CSS on" 
configurations. I don't think that's *too* bad because people can also 
turn off CSS to get it to work. It would be nice to get round the 
problem completely, which should be kind-of-possible with JavaScript, 
but I must admit I don't usually do that at the moment.


More information about the BNMList mailing list
BNMList is hosted by Screenlists, a Screen-Play.net service