CSS Problem

[Mike]

Hi all,

I've got the following CSS:




a.reviewbuttons:link {
background:#052220;
border-style:solid;
border-width:1px;
width:100%;
}
a.reviewbuttons:visited {
background:#052220;
border-style:solid;
border-width:1px;
width:100%;
}
a.reviewbuttons:active {
background:#052220;
border-style:solid;
border-width:1px;
width:100%;
}
a.reviewbuttons:hover {
background:#052220;
border-style:solid;
border-width:1px;
width:100%;
}


I've made a few links which have this as their class. However, whatever I set it to, the width never changes. It's always just the same size as the text length itself.

Could someone help me please? I want the width to be 100%...

Oh and, the links are in <td> tags...

Cheers,
Mike

[r2d2]

Hey Mike,

You need to add display:block; to the list - links are 'inline' elements, which means they ignore any width commands.

Also, you don't need to repeat all the commands for the different <a> types. Just put them first as the root element, then add any changes you want to occur for the different states.


a.reviewbuttons {
display:block;
background:#052220;
border-style:solid;
border-width:1px;
width:100%;
color:#FFF;
}
a.reviewbuttons:link {
}
a.reviewbuttons:visited {
}
a.reviewbuttons:active {
}
a.reviewbuttons:hover {
border-color:#0F0;
}

[deronsizemore]

Do you have the rest of the html and css code? There may be something else throwing it off in your css document or even in you html code. If you have it uploaded please post a link.

[Masetek]

You may also want to use margin and padding to set the size of the background. Padding with increase the space between the link and border.

[Mike]

Yup, that worked r2d2, cheers mate :)

[James]

You may also want to use margin and padding to set the size of the background. Padding with increase the space between the link and border.
Using padding'd mean that he'd be stuck with a bunch of links with dissimilar widths.