Images not showing as a hyperlink

Question

I suspect I'm doing something stupid but I have some hyperlinks styled as images with css but they don't work as links.

Experimental page is at http://cotswoldplayhouse.co.uk/jm3/index.php/what-s-on
and it's the 'Read more' and 'buy tickets' buttons.
The page is built by php but the html looks like this...

<td>
<div class="sg-read-more">
<a href="#">Find out more</a>
</div>
<div class="sg-book-ticket">
<a href="http://www.ticketsource.co.uk/event/70577" target="_blank">Book Ticket</a>
</div>
</td>

The CSS is this....

div.sg-book-ticket {
        display:block;
        position:absolute;  
        background:url(images/buy-ticket.png) no-repeat 0 0; 
        right:15px;
        bottom:2px; 
        width:80px;
        height:40px;
        text-indent:-9999px;
        }

div.sg-book-ticket:hover {
background-position:0 -40px;
        }

The images display correctly and the rollover works, but they aren't links.
What have I missed?

*..I have some hyperlinks styled as images with css ...*: No. You have `div`s with background images. — Abhitalks, Oct 31 '14 at 15:14
either style the links and take out the `
` or use `jquery` to target the links for example. You are only making the text clickable not the whole div. — chriz, Oct 31 '14 at 15:16
Thanks all. As you say, moving the style to the link worked. — sclg, Oct 31 '14 at 15:35

score 1 · Answer 1 · answered Oct 31 '14 at 15:17

I personally would style the link as opposed to the div

div.sg-book-ticket{
 position:absolute;  
 right:15px;
 bottom:2px; 
}  
div.sg-book-ticket > a{
    display:block;       
    background:url(images/buy-ticket.png) no-repeat 0 0;       
    width:80px;
    height:40px;
    text-indent:-9999px;
}

div.sg-book-ticket a:hover{
    background-position:0 -40px;
}

Refilon · Answer 2 · 2014-10-31T15:17:48.767

0

if you want the whole div to be clickable, use this :

<td>
<a href="#">
<span class="sg-read-more">
</span>
</a>
<a href="http://www.ticketsource.co.uk/event/70577" target="_blank">
<span class="sg-book-ticket">
</span>
</a>
</td>

edited Oct 31 '14 at 15:17

answered Oct 31 '14 at 15:12

Refilon

3,334
1
27
51

It will work yes, but It will show up as invalid when testing the compatibility. Unless you are using HTML5, it is invalid to nest a block element inside an inline element. – chriz Oct 31 '14 at 15:17
@chriz it is **not** bad practice to wrap a div in a `` – web-tiki Oct 31 '14 at 15:18
@web-tiki I'm sorry, but, it is. Look everywhere. [or here](http://stackoverflow.com/questions/8160494/how-to-make-a-whole-div-clickable-in-html-and-css-without-javascript) – chriz Oct 31 '14 at 15:20
it's better to use `span` instead of `div` inside of the `a` element – mark Oct 31 '14 at 15:20
1

@chriz Sorry...I think you're a little out of date - http://stackoverflow.com/questions/1827965/is-putting-a-div-inside-an-anchor-ever-correct – Paulie_D Oct 31 '14 at 15:21
@chriz http://html5doctor.com/block-level-links-in-html-5/ + if you had read the link you posted you would have seen it is now possible to wrap a div in a link. – web-tiki Oct 31 '14 at 15:22

score 0 · Answer 3 · answered Oct 31 '14 at 15:26

0

Can you try the following?:

<a href="<a href="http://www.ticketsource.co.uk/event/70577" target="_blank" alt="book ticket" />
<img src="images/buy-ticket.png" />
</a>

instead of putting the image in the css?

answered Oct 31 '14 at 15:26

Gerwin

1,572
5
23
51

Images not showing as a hyperlink

3 Answers3