Forum Moderators: not2easy

Message Too Old, No Replies

link shorthand

confused

         

Lorel

8:00 pm on Jan 7, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Hi,

I'm having a problem with link shorthand.

I have buttons that load as background images with text floating on top of the images. Most of the buttons need black text for the link but 2 of them need another color. I left everything out that is the same in the normal link colors.

The first set below works and the 3rd set but not the 2nd (furnace) - it reverts to the normal link colors. I can't see what's wrong. Have I arranged the items incorrectly? I tried moving the a:link to the front but that didn't work either.

.button150 {
width:150px; }

.button150 a:link, a:visited { color: #000000; }
.button150 a:hover, a:active { color: #666666; }

.button150, .button-furnace a:link, a:visited {color:#ffcccc; }
.button150, .button-furnace a:hover, a:active {color:#cccccc; }

.button150, .button-fireplace a:link, a:visited {color:#ffffcc; }
.button150, .button-fireplace a:hover, a:active {color:#cccccc; }

Here is the html for the fireplace button:

<td class="button150" align="center">

<div class="button-fireplace">
<a href="fireplaces.htm" style="position:relative;top:127px;">Fireplaces</a>
</div>

and furnace button:

<td class="button150" align="center">

<div class="button-furnace">
<a href="furnaces.htm" style="position:relative;top:127px;">&nbsp; Furnaces</a>
</div>

Here is the Css for normal links:
a:link { color: #336699;
font-weight: bold;
background: none;
font-size:14px;
text-decoration: none; }
a:visited { color: #336699;
font-weight: bold;
background: none;
font-size:14px;
text-decoration: none; }
a:hover { color: #6699cc;
font-weight: bold;
background: none;
font-size:14px;
text-decoration: none; }
a:active { color: #6699cc;
font-weight: bold;
background: none;
font-size:14px;
text-decoration: none; }

and here is the css for loading the background images:

.button-furnace {
height:150px; width:150px;
background: url(images/button-furnace.gif) no-repeat; }

.button-fireplace {
height:150px; width:150px;
background: url(images/button-fireplace.gif) no-repeat; }

Lorel

8:04 pm on Jan 7, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Never mind. When I uploaded it to the server it worked.

Please delete this if you want.