PDA

View Full Version : CSS Problem



Mike
10-19-2005, 12:40 PM
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
10-19-2005, 02:49 PM
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
10-19-2005, 02:49 PM
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
10-19-2005, 05:09 PM
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
10-20-2005, 10:19 AM
Yup, that worked r2d2, cheers mate :)

James
10-20-2005, 12:47 PM
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.