Single CSS to swap background image and text links?

[markd]

Dear all

We are tying to put together a CSS which will both swap a background image onmouseover/hover and also incorporate link properties in the same CSS.

In effect, we are using a table cell with a small graduated background in it - serving as a sort of button. We would also like to use some text on top of this button. We do have to use a table/table cell for this - reasons to boring to go into.

There will be an 'active' state (showing one instance of the grad button) and HTML text on this eg. More info

On hover the grad button would swap to a 'down' state and the text change colour.

Here is the code we are tying to develop.

}
.alsostyle {
colour: #ffffff;
}
.alsostyle a:link, .alsostyle, .alsostyle a:active {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
text-decoration: none;
colour: #000000;
display: block;
width: 167px;
height: 34px;
background-image: url(media/also_media/Alsobk.gif);
background-repeat: no-repeat;

}
.alsostyle a:hover {
colour: ##DD5800;
display: block;
width: 167px;
height: 34px;
background-image: url(media/also_media/Alsobk_f2.gif);
background-repeat: no-repeat;

We can get the background to swap but not the text. Can we do this in one CSS, or should we use two? Can you apply two CSS styles to the same object?

Any help for the 'CSS challenged' would be welcomed.

[SuzyUK]

markd,

a quick glance shows some typos in your code, and you also have

.alsostyle

declared twice I presume that is the class on the table cell? if so you don't need to declare it as you CAN change both the background and the link color via the link properties. The

display: block;

on the link should make it fill the table cell so it appears that the background of the table cell is changing but in fact it's the background on the link.

.alsostyle {
colour: #ffffff;
}

.alsostyle a:link, .alsostyle, .alsostyle a:active {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
text-decoration: none;
colour: #000000; /* see rule below */
color: #000;
display: block;
width: 167px;
height: 34px;
background-image: url(media/also_media/Alsobk.gif);
background-repeat: no-repeat;
background-color: #fff; /* add background color close to bg image color */

}
.alsostyle a:hover {
colour: ##DD5800; /* see rule below */
color: #dd5800;
display: block;
width: 167px;
height: 34px;
background-image: url(media/also_media/Alsobk_f2.gif);
background-repeat: no-repeat;
background-color: #fff; /* add background color close to bg image color */

suggestions, remove the bits in blue, add bits in red, if this fixes it for you then it is the simple typos - color not colour and only one hash # before a color hex value

adding a background color close to the background image color (or at least a contrast to text on top) is just a suggestion in case user chooses not to display images..

it that's not it can you also post an excerpt of the HTML that the CSS in your OP applies to, thanks

PS: the CSS Validator [jigsaw.w3.org] would've caught these and it may be an idea to run your CSS through that to catch illegal values and/or parse errors ;)

[edited by: SuzyUK at 11:16 am (utc) on June 8, 2007]

[markd]

Thanks Suzy

All your suggestions worked perfectly!

I have also managed to get the text to sit away from the left edge of the background graphic by adding:

text-indent: 6pt;

Would there be a way I could get a similar effect to have the text away from the top of the area?

I have tried

vertical-align: ;

With a value, 'middle' and 'bottom' but this didn't seem to work.

Thanks again

Mark

[mihai2u]

Setting a line-height as big as the height of those should work just fine.. in centering the text vertically.
(line-height:34px;)

vertical-align:center does not work on certain browsers.

If you are searching for vertical-align:center functionality, this is what you should do:

You should search for:
"Vertical Centering in CSS"
on google... You'll find some methods of vertical centering elements with unknown height.

Cheers