h1 image replacement no link

[twaddler]

Hi all,
I’ve been following Chris’s excellent video tutorials to help create a wordpress theme but have run into an early snag.

I’m using the h1#logo image replacement technique but it simply will not allow the link to be applied to the image, or, possibly, the div that contains it (my understanding of how this is meant to work may be misplaced).

The link is only applied to the text which is now indented -9999px.

My code is as follows which I’d swear is pretty much as that which Chris uses apart from the margins and dimensions:

Code:

h1#logo
{width: 1020px; height: 325px; background: url(media/header_img.jpg) no-repeat; text-indent: -9999px; margin: 0 0 20px 0;}

Any advice much appreciated.

Thanks
Yan

[Meander365]

Have you tried the Dwyer method for image replacement? Give this a try:

Code:

This is the alternative text

[Rob MacKay]

all you need to do is…

Code:

h1 a {
display:block;
width:100%;
height:100%;
}

and that should sort ya :)

[twaddler]

Thanks guys much appreciated.

Rob, your method answers most handsomely apart from…
I have a background colour used on my a:hovers which the h1 image now picks up too.
I’ve tried targetting this with

Code:

h1 a:hover {color:white}

so trying to disable the hover state but it does no good.

Is there a way round this or should I lose the hover backgrounds instead?

Ta
Yan

[twaddler]

Arggh!
I know it’s missing the semi-colon but it doesn’t work when I put it in either.

Yan

[twaddler]

Sorry, me again.
OK, I’ve used ‘transparent’ as background-colour for h1 hover which works in FF on mac.
Do we know if this filters down to IE 6 pc?
I’m not in a position to test just yet.

Thanks
Yan

[Rob MacKay]

Hey :)

Do you have a live linky? :)

Also for reference, you dont need a semi colon on the end of a single line of CSS, for example:

h1 { width:100px }

You would need it after one, because its the semi colon that says "New style option!!"

So

h1 {width:100px; height:100px }

would be perfectly valid.

[Author]

Posts