best image replacement method

[cuce]

hello, just wondering what the general concensus is on image replacement methods.

I have heard Fahrner is no no good because it hides text from some screen readers. I've heard Leahy/Langridge doesnt render well without messy hacks.

My concern is that I am building a site and we want to have the headings display as vertical text(bottom to top rather than left to right)
so sIFR is out too.

any suggestions?

[zackattack]

Hi cuce

The Gilder/Levin (Tom Gilder & Levin Alexander) method:

<h1>
<span></span>Heading
</h1>

h1 is then set at position relative:

h1 {
width: 100px;
height: 50px;
position: relative;
}

then inside this position an image (needs to have a solid background as this hides the text beneath:

h1 span {
background: url(heading-image.gif) no-repeat;
position: absolute;
width: 100%;
height: 100%;
}

It works like a dream..! and also works when images are turned off and/or when css is turned off -

The only mini fly in the ointment is the extra span, but one can put up with that considering the other benefits

ZA

[cuce]

perfect thanks Zach!

[abulafia]

I use the above method, too, only I put the span tag after the text:

<h1>
Heading<span></span>
</h1>

h1 { position: relative; top:0; left:0;
width: 100px; height: 20px;
}
h1 span { display: block;
width: 100px; height: 20px;
top: 0; left: 0; position: absolute;
margin: 0; padding: 0;
background: #FFF url(imageheader.png) no-repeat top left;
}

This keeps the image in front of the text for sure.

[bedlam]

I've heard Leahy/Langridge doesnt render well without messy hacks

Only because you don't know the secret :-)

Seriously, it's not particularly difficult to get this method to work--though it has the disadvantage of being totally invisible when images are off or not available in the browser.

In any case, if by 'hacks' you mean 'hard to make work in IE 5 Windows,' it's not so bad; if you're supporting that browser, you probably have an external IE 5-only stylesheet called inside a conditional comment in the head of your pages, right?

If not, think about doing it:

HTML:

<!--[if IE 5]>
<style type="text/css">
@import url(styles/ie5Win.css);
</style>
<![endif]-->

As long as this file is called after the main stylesheet(s), it will override the necessary styles in IE 5. And since it's in a conditional comment that no non-IE browser (including IE Mac) will see, you don't have to worry about other browsers messing up pages with IE 5's styles.

On the other hand, if by 'hacks' you mean 'hard to make work in IE 5 Mac,' then you have a point--though it's not really less difficult than using the other FIR methods in the same browser... I can't recall the complete fix off the top of my head, but one important step if you want to try to make it work in IE Mac is not to set the height of the fir object to zero but to 1px instead:

HTML:

<!-- Assume the image used as background is 200px x 50px -->
<h1 id="someHeadline">Lorem ipsum dolor</h1>

CSS:

#someHeadline {
background:transparent url(path/to/image.gif) no-repeat 0 0;
width:200px;
height:1px;
overflow:hidden;
font-size:12px;
padding-top:49px;
}

Besides the various idiot children in the IE family, I don't know of any other reasonably modern browsers that need any kind of hacks with this method.

-b