Using images for links

[David Roden]

Hi.

I'm trying to create a stylesheet for a page that shows images instead of
text links. I tried to apply the FIR method but apparently that only works
for block-level elements.

Used HTML:

<a href="link.html"><div class="image"><span>text</span></div></a>

Used CSS:

..image {
width: 48px;
height: 48px;
background-image: url(48x48.png);
display: inline;
}

..image span {
display: none;
}

The text in the span element is not shown but neither is the background
image. In addition to that the width and height properties seem to be
ignored.

I also tried moving the css properties into the a element, using span
instead of div, using the id attribute but none of that works the way I
would expect it to.

Am I missing something fundamental here? (Accessibility is not an issue here
as the page will be centered around images so blind people simply do not
belong to the target group. :)
Thanks for help,
David

[Spartanicus]

David Roden <dr****@gmail.com> wrote:

I'm trying to create a stylesheet for a page that shows images instead of
text links. I tried to apply the FIR method
For some bizarre reason some people have come to believe that image
replacement techniques are a normal way to code images. It is not, there
are only a few instances where there is an arguable benefit to using IR,
and the drawbacks are nasty enough to avoid using IR techniques in all
but a very few instances.
<a href="link.html"><div class="image"><span>text</span></div></a>

<a href="link.html"><img src="..." width="..." height="..."
alt="text"></a>

--
Spartanicus

[David Roden]

-----BEGIN PGP SIGNED MESSAGE-----
Hash: SHA1

Spartanicus wrote:

<a href="link.html"><img src="..." width="..." height="..."
alt="text"></a>

Oops, I forgot to mention that I want the links to be themeable by a
stylesheet. Of course I know of the IMG tag and how to use it as a link but
that is not the way I want it... though that's what I'd have to revert to
if all IR techniques only work with block-level elements.
Thanks for help,
David
-----BEGIN PGP SIGNATURE-----
Version: GnuPG v1.4.2 (GNU/Linux)

iD8DBQFDbKL6sh8Hgp5TwkMRAjB1AJ92uCD2nDeZgchonyYTJY ZlfCTFowCgqYgE
5qza0dhRWxLoqpb5zIpVaCw=
=vQiM
-----END PGP SIGNATURE-----

[Jim Moe]

David Roden wrote:

I'm trying to create a stylesheet for a page that shows images instead of
text links. I tried to apply the FIR method but apparently that only works
for block-level elements.
FIR = Finite Impulse Response?
<a href="link.html"><div class="image"><span>text</span></div></a>
.image {
width: 48px; height: 48px;
background-image: url(48x48.png);
display: inline;
}

Inline objects "shrink to fit" whatever they contain. Inline, as such,
has no height, width or background properties. When you disappear the
text, you disappear the link.
What's wrong with styling <img>?

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

[Stephen Poley]

On Sat, 05 Nov 2005 11:07:23 -0700, Jim Moe
<jm***************@sohnen-moe.com> wrote:

David Roden wrote:

I'm trying to create a stylesheet for a page that shows images instead of
text links. I tried to apply the FIR method but apparently that only works
for block-level elements.

FIR = Finite Impulse Response?

Fahrner Image Replacement.

As Spartanicus said, perhaps occasionally useful but you should use
ordinary foreground images with ALT text unless you have a clear reason
not to. And (important) text within images is a bad idea anyway.

--
Stephen Poley

http://www.xs4all.nl/~sbpoley/webmatters/

[Martin Eyles]

try this style

a {display: block}

if you want all links to be block level, or this

a.block {display: block}

if you want only those with class block to behave like this

--
Martin Eyles
ma**********@NOSPAM.bytronic.com

"David Roden" <dr****@gmail.com> wrote in message
news:dk*************@news.t-online.com...

Hi.

I'm trying to create a stylesheet for a page that shows images instead of
text links. I tried to apply the FIR method but apparently that only works
for block-level elements.

Used HTML:

<a href="link.html"><div class="image"><span>text</span></div></a>

Used CSS:

.image {
width: 48px;
height: 48px;
background-image: url(48x48.png);
display: inline;
}

.image span {
display: none;
}

The text in the span element is not shown but neither is the background
image. In addition to that the width and height properties seem to be
ignored.

I also tried moving the css properties into the a element, using span
instead of div, using the id attribute but none of that works the way I
would expect it to.

Am I missing something fundamental here? (Accessibility is not an issue here as the page will be centered around images so blind people simply do not
belong to the target group. :)
Thanks for help,
David