7 replies [Last post]
Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 32 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

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. :?

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Anonymous
Anonymous's picture
Guru

Image replacement method

FF/Mac allows me to turn off the image to see the text below.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 32 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Image replacement method

Must just be me then.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 35 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

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.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 32 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

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/

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 35 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

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 Smile

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.

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 8 years 12 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

Image replacement method

Unlike T, I can't get FF/Mac to not display the image. :?:

Anonymous
Anonymous's picture
Guru

Image replacement method

wolfcry911 wrote:
Unlike T, I can't get FF/Mac to not display the image. :?:
Wait, I think I may have misunderstood.

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.