Linking Hell2

[LukeLarrea]

If I have something like the following:

CSS:
...
#someCrazyDiv {
border: 2px;
position: absolute;
width: 200px;
top: 100px;
left: 100px;
}

.funkyLink a:link, .funkyLink a:visted{
text-decoration: none;
display: block;
}

.funkyLink a:hover{
background-color: FFAABB;
}
...

HTML
...
<div class="funkyLink" id="someCrazyDiv ">
<a href="xyz.com">Link 1</a>
<a href="xyz.com">Link 2</a>
<a href="xyz.com">Link 3</a>
</div>
...

Then I get a fixed width div with a border, with my links nicely ordered vertically and a nice change of background color when I hover over the links.

The only problem is that the change of background color on hover only affects the area directly behind text, equal to the widest piece of text in my list of links.

Can I make the hover effect extend right to the edges of the div so that it fits snuggly against the div border?

[Tyssen]

As well as adding display: block, you have to give your anchors width & height as well.

[LukeLarrea]

Awesome, you are a hero!