Style All Widget LI Uniformly

Sven · #1 Dec 3, 2011, 09:30 PM

First,

Thanks for the great theme. The more I work with it the better I like.

I am having some trouble styling all of the widgets in the right sidebar on my blog Swanson Tech Online, where I have praised this theme.

I have created the following Custom CSS and applied at ATO>Add CSS Inserts:

Code:

#right div.widget ul li{
display: block;
width: auto;
margin: 3px;
background-color: #21759b;
border: solid 1px #CCCCCC;
border-top-left-radius: 0px;
border-top-right-radius: 8px;
border-bottom-left-radius: 0;
border-bottom-right-radius: 8px;
}

div.widget ul li a{
margin: 0 12px 0 0;
}

div.widget ul li a:hover{
color: #FFFFFF;
}

#right div.widget ul li:hover,
#right div.widget ul li.sfhover{
display: block;
width: auto;
margin: 3px;
background-color: #000000;
border: solid 1px #FFFFFF;
border-top-left-radius: 0px;
border-top-right-radius: 8px;
border-bottom-left-radius: 0;
border-bottom-right-radius: 8px;
}

The problem I am having is that when I 'hover' over either the Meta Widget or the BFA Recent Comments Widget items, I can only click if I am directly over the text and not just on the shaded area or the hovered 'area' of the <li>.

Not sure what I am missing, but I would prefer that all of these areas act like buttons.

Any help correcting this would be immensely appreciated.

Thanks,

GD (Sven)