Sun, 2006-02-26 21:54
Can people test something out for me? Just seen on another forum a suggestion for an image replacement method that doesn't involve removing the text from the screen but also doesn't involve any empty tags:
h1 { width:150px; height:100px; overflow:hidden; }
h1::before { content:url(image.gif); display:block; }Now, when I test that out in Firefox, I can't actually turn the image off or disable it in any way which makes me wonder whether it is an accessible method. But maybe it's just my machine. :?
Mon, 2006-02-27 02:23
#1
Image replacement method
FF/Mac allows me to turn off the image to see the text below.
Mon, 2006-02-27 03:15
#2
Image replacement method
Must just be me then.
Mon, 2006-02-27 10:24
#3
Image replacement method
I've used that method (example, check the h1). It won't work in IE and the height of the block element needs to match the height of the image. The complete method with IE support added is detailed at Fecklessmind.
Mon, 2006-02-27 10:51
#4
Image replacement method
Chris..S wrote:
The complete method with IE support added is detailed at Fecklessmind.
That example's second method (the one using :before) actually says:
Quote:
Sadly, this second example doesnât work in Firefox with images OFF, otherwise just fine.
Another example that it links to seems to though: http://www.jasonkarldavis.com/articles/gir/
Mon, 2006-02-27 12:49
#5
Image replacement method
Yes, but it uses before with position:absolute; rather than before with display:block; Maybe it was the wrong link, but it is the one I remember using 
I used similar styles to those you listed ...
#preg #banner h1:before {
display: block;
content: url(/images/preg.png);
}
For the sample link I gave above, if I disable images via the web developer bar, the underlying text shows up just fine.
Mon, 2006-02-27 15:26
#6
Image replacement method
Unlike T, I can't get FF/Mac to not display the image. :?:
Mon, 2006-02-27 15:50
#7
Image replacement method
wolfcry911 wrote:
Wait, I think I may have misunderstood.
Unlike T, I can't get FF/Mac to not display the image. :?:
I was turning off the CSS styling not image loading.
Turning off image loading still shows the pic in FF/Mac which is strange.
Sorry for the confusion.