Okay, I have been messing with this for a while now and I can not seem to get it right. Basically, I want to make it so when you hover over a link in the feed, a rounded bubble encases the entirety of the link. So, I put the link in an unordered list to get the effect, but it shrinks the text so you can no longer read it. Like this…
http://img408.imageshack.us/img408/1450/screenshot8l.png
So, my question is: how do I enlarge the text, scoot the text over so that it is centered in the widget, and keep the round bubble that appears around the link?
Here is my CSS code that concerns the area discussed…
/*
TYPOGRAPHY
*/
h6 {
font-size: 0.8em;
color: #333333;
}
h6 a {
color: #FFFFFF;
}
h6 a:hover {
background: #FFFFFF;
color: #FFC800;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
/*
WIDGETS
*/
.widget {
background: #FFC800;
width: 150px;
margin-bottom: 14px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.widget .inside {
padding: 14px;
}
.widget ul {
color: #FFFFFF;
margin-left: 14px;
}
.widget ul a {
font-size: 0.8em;
color: #FFFFFF;
font-weight: bold;
display: block;
padding-top: 2px;
padding-right: 10px;
padding-bottom: 2px;
padding-left: 10px;
}
.widget ul a:hover {
background: #FFFFFF;
color: #FFC800;
}
And here is the HTML and PHP for the widget…
