Take off the display:block. Anchors are usually displayed inline, and changing them to block makes them extend to the full width of the container.
This doesn't fill the rest of the line to the right, because you're only specifying the anchor; there's no container to fill the rest of the line, so we can't really create a rule to fill that way.
The real problem is the extra <br/>. When you change one of the anchors to block display, it gets the full line, then the break shows, then the rest of the anchors. You could leave the display:block, and then modern browsers could use:
Code: Select all
.serendipitySideBarContent a:hover+br {
display: none;
}
to eliminate this problem, but IE doesn't understand it.
To keep everything you want, use this set of rules:
Code: Select all
.serendipitySideBarContent a:hover {
font-size: 11px;
color: #149FA8;
background: #FFFBF0;
display: block;
}
.serendipitySideBarContent a {
font-size: 11px;
color: #149FA8;
background: #FFFBF0;
display: block;
}
.serendipitySideBarContent br {
display: none;
}
The only problem is that the category images and XML feed images are also anchors, so they become divs, and then they take up their own line. To fix THAT, you'll need to float them:
Code: Select all
.serendipitySideBarContent img {
float: left;
margin-right: 3px;
}
Good Luck!
