Question

I have a problem. The designer I hired did not separate out the logo and the header and its to late to get it done from him.

so I have a header image which has the sites logo in it. I want to make this logo clickable. You can see the site here: http://www.stopsweats.org/

The code for the logo tag is:

<div id="header">
<p id="logo">
<a href="http://www.stopsweats.org"></a>
</p>

Here is the CSS, added as per comments

#header {
    background-image: url("http://www.stopsweats.org/wp-content/uploads
/2010/12/sweatbackground1.jpg");
    border-color: transparent;
    height: 108px;
    padding-top: 2em;
    z-index: -1;
}

So how can I make this into a valid link.?

1. I don’t want to add any visible text as it will look ugly.
2. I will change the #logo width and height and placement as an overlay on the image. Hope fully that should be ok among all browsers.

Answer 1

The easiest thing to do is make the a take up some space. It’s already properly positioned, so there’s only a little bit to do.

Remove these css width and height properties:

#logo a {
    width:1px;
    height:1px;
}

Then add a little text to the a:

<a href="http://www.stopsweats.org">StopSweats</a>

The text won’t be displayed because you have text-indent: -9999px applied to that a, but the block will be about the right width and height to cover the banner image area.