Image Replacement and links - HELP needed!

[sk3pt1c]

i've used image replacement on a site i'm building to replace the links in <li> in a <ul> that i'm using for navigation with images.
the idea was to keep the navigation accessible for people with no images and to provide cool looking fonts for those that are using normal browsers.
but, the links don't work.
can you not use image replacement for links?
can someone reply a.s.a.p. please?!?!
thanks

 

[sk3pt1c]

anyone?
i really need some help here

ps. i used the Levin method as described in "The zen of css design"

any ideas?

 

[mnkeybsness]

you need to post some code examples for how you are actually doing it. otherwise all i can say is that, yes, image "replacement" does work.

 

[sk3pt1c]

ok, here goes
this is the html

<li class="replace" id="home"><a href="htttp://www.google.com">Home</a><span></span></li>

and this is the css

.replace {
	position:relative;
	margin:0px;
	padding:0px;
	/* hide overflow:hidden from IE5/Mac \*/
	overflow:hidden;	/**/
}

.replace span {
	display:block;
	position:absolute;
	top:0px;
	left:0px;
	z-index:1;
}
#home, #home span {
	height:28px;
	width:61px;
	background-image:url(images/home.gif);
}

the CSS is exactly off page 134-135 of the Zen of Css design
when i preview the page, the image replacement works just fine
but when i hover over it i don't get the link "hand", nor the "title" and
of course i can't click on it.

what gives?

 

[epochblue]

My guess is that you're putting the span above the link (z-index: 1), and since the span isn't contained within the link, it's as if the anchor isn't even there.

...but that's more of a WAG than anything else.

 

[yellow]

...but that's more of a WAG than anything else.

Wild Ass Guess?

Never heard that one, but I likes it.

 

[sk3pt1c]

WAG does rock, but it does seem odd to me that a method put in a very popular book would fail to work on links...

putting it above the link is the point in replacing the link with the image, but i want to keep the link's behavior and not the text.

if i put the span in the link, it doesn't really work.

should i add extra css to make it work or what?

 

[sk3pt1c]

i've also found this:

http://www.tjkdesign.com/articles/tip.asp

he does implement a link there

maybe that would work for me

ideas?

 

[sk3pt1c]

links seem to work with Thierry image replacement but when the style is disabled they disappear...
hmmm
can someone lend a hand here?
hello?

 

[sk3pt1c]

this just proves my point that CSS sucks!
until it's a legal requirement or it gets better, there's absolutely no use spending so many hours trying to find the best hack to make it work...

 

[ambient]

css defiently doesnt suck once you get the hang of it.. i would deinfetly look at using maybe javascript for this effect css is more for layout sorta stuff..

http://www.quirksmode.org/dom/fir.html

maybe try this...