I have some DIVS that I have text links in. I would like the whole div to be a link. I would like it so that when the user rolls the mouse over any part of the div it is a link and the hover style kicks in which in this case will change the background of the div.

This works ok in FF but not in IE7.

Here is what I've got so far, any ideas:

.button {
    height:20px;
    line-height:20px;
    background-color:#FFCCFF;
    float:right;
    margin-top: 1px;
    border:#999999 1px solid;
    text-align:center;
    padding:0px;
    display: block;
    font-weight:bold;
    }
.button a, .button a:active, .button a:focus  {
    color:#000000;
    display: block;
    text-decoration: none;
    background-color:#96D2F3;
    }
.button a:hover {
    color:#000000;
    display: block;
    text-decoration:none;
    background-color:#00FF00;
    }

Thanks.

I would like the whole div to be a link

You really cannot do this, not with VALID code. It would be invalid to wrap div inside <a></a> tags.

Now, standards-compliant browsers will take the hover pseudo-class on elements besides the <a> tag, but IE won't, and that still wouldn't make it a link.

Need to see all the code or a URL though.

You can see it on the 'buy now' and 'more info' buttons: http://electriccoolbox.org.uk/

<div class="button button-right">buy now</div>
<div class="button button-left">more info</a></div>

Thanks.

a technique i used that works on IE7+, FF, safari and chrome is

.button:hover { background-color: #whteva; }

and to div being a button, you can but not valid.. you can do it for a span tho

<a href="#"><span class="button">Buy Now</span></a>

You can see it on the 'buy now' and 'more info' buttons

Like I said - not valid code.
You could achieve a similar effect w/o the div though, by just using the <a>, specify a height and width to make it the size you want it, along with padding for spacing.

Originally Posted by LadynRed

Like I said - not valid code.
You could achieve a similar effect w/o the div though, by just using the <a>, specify a height and width to make it the size you want it, along with padding for spacing.

another great and effective technique...

Originally Posted by LadynRed

Like I said - not valid code.
You could achieve a similar effect w/o the div though, by just using the <a>, specify a height and width to make it the size you want it, along with padding for spacing.

So how would that work?

Create a style called button and apply it to the <a> tag?

How would the hover effects get defined and picked up?

Thanks.

Create a style called button and apply it to the <a> tag?

Essentially, yes.

How would the hover effects get defined and picked up?

Same as you did for the div, just applied to the <a>.

Hmm. I've tried this to no avail:

.butt {
background-colorink;
width: 200px;
height: 50px;
}
.butt a:link, .button a:visited {
background-color:yellow;
width: 200px;
height: 50px;
}
.butt a:hover {
background-color:red;
width: 200px;
height: 50px;
}

<a href="#" class="butt">link</a>

Any ideas?

It works fine you need to add more style

.butt {
background-color: pink;
width: 200px;
height: 50px;
text-align:center;
color:#000;
text-decoration:none;
padding-top:15px;
}
.butt a:link, .button a:visited {
background-color:yellow;
width: 200px;
height: 50px;
}
.butt a:hover {
background-color:red;
width: 200px;
height: 50px;
}

<a href="#" class="butt">link</a>

Does that help?

Doesn't seem to have made a difference I'm afraid.

what version of IE are you using. I'm opening it with IE7 an it works fine.

IE 7 here too.

okay, can you show me a screenshot. I've got it set up on my webpage

http://konetchreport.com/linktest/

Firefox:


In IE there is no roll over effect, is there meant to be?

I think I will just use ul li for this.

Okay, that's the technique I use for most menu items. Good luck