ADDING BACKGROUND TO THE READ MORE LINK

www.faccess.net

...using style 4...

How would i go about adding a background to the " Read More "

When I view it in my CSS Inspector: this is the code...

template.css.css

a:link, a:visited (line 11)
{
text-decoration: underline;
}

a:hover (line 15)
{
text-decoration: none;
}

a.readon:link, a.readon:visited (line 19)
{
display: block;
text-decoration: underline;
text-align: right;
}

a.readon:hover (line 25)
{
display: block;
text-decoration: none;
text-align: right;
}

Thanks
Trey

...right now links are set to: #003366

If I wanted to make the " Read More " links a unique color on a background say a background color of #003366 wouldn't I add this?

a.readon:link, a.readon:visited (line 19)
{
display: block;
text-decoration: underline;
text-align: right;
background-color:#003366;
color: #FFF !important;
}

a.readon:hover (line 25)
{
display: block;
text-decoration: none;
text-align: right;
background-color:#003366;
color: #FFF !important;
}

...and what would I need to add; so, it is only behind the " Read More " words...

Would I add this?

background:url(../images/read_more_bg.png) no-repeat;
background-position:right;
height: 32px;
width: 80px;
color: #FFF !important;

Trey

...this is what I added and the screenshot below is what is being rendered right now....

a.readon:link,a.readon:visited {
display:block;
text-decoration:none;
text-align:right;
background:url(../images/read_more_bg.png) no-repeat;
background-position:right;
height: 32px;
width: 94px;
color: #FFF !important;
font-weight:bold;
padding: 10px 8px 0px 0px;
}

a.readon:hover {
display:block;
text-decoration:none;
text-align:right;
background:url(../images/read_more_bg.png) no-repeat;
background-position:right;
height: 32px;
width: 94px;
color: #FFF !important;
font-weight:bold;
padding: 10px 8px 0px 0px;
}

how do i get it positioned to the right...
thanks again

trey

Have you tried float:right; ?

thanks ivan that worked...