Forum Moderators: not2easy
There is a background image with a border on the bottom that is set in CSS to fill each cell horizontally as the page widens (i put this class in the TR cell). This works
There is an image centered in each table TD cell representing a different widget. It is called up via CSS using ID and set as a background. I used the ID so there aren't two classes calling up two different backgrounds as I've never been able to get this to work otherwise. This works
The text is suppsed to float over the image and this works.
However the text isn't changing fonts, colors as specified. I think it's picking up one of the other link classes but I have it set specifically as "buttonlinks". It appears to be in conflict with some other code but I can't figure it out. I put this code above all other link commands.
Can anyone tell why this code isn't bringing up buttonlink specifications. I made sure the CSS and HTML validated.
Here is the HTML:
<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#996633">
<tr valign="top" class="headerbg">
<td width="20%" align="center" valign="bottom" ID="Widget1">
<a href="http://www.example.com/index.htm" class="buttonlinks">Widget 1</a>
</td><td width="20%" align="center"align="center" valign="bottom" ID="Widget2">
<a href="http://www. EXAMPLE.com/dining/index.htm" class="buttonlinks">Widget 2</a>
</td><td width="20%" align="center" align="center" valign="bottom" ID="Widget3">
<a href="http://www. EXAMPLE.com/outdoor/index.htm" class="buttonlinks">Widget 3</a>
</td><td width="20%" align="center" align="center" valign="bottom" ID="Widget4">
<a href="http://www. EXAMPLE.com/living/index.htm" class="buttonlinks">Widget 4</a>
</td><td width="20%" align="center" align="center" valign="bottom" ID="Widget5">
<a href="http://www. EXAMPLE.com/pub/index.htm" class="buttonlinks">Widget 5</a>
</td></tr></table>
Here is the CSS:
.headerbg {background-image: url(images/headerbg.jpg);
background-repeat: repeat-x; }
#Widget1 {background-image: url(images/widget1.jpg);
background-repeat: no-repeat; }
I don't have the IDs for other widgets set up yet, Trying to get #1 to work correctly
.buttonlinks a:link {color #FFFFcc;
text-decoration: none;
font-size:16px;
font-style: italic;
font-family: Textile, cursive; }
.buttonlinks a:visited { color: #FFFFcc;
text-decoration: none;
font-size:16px;
font-style: italic;
font-family: Textile, cursive; }
.buttonlinks a:hover {color: #CC9933;
text-decoration: none;
font-size:16px;
font-style: italic;
font-family: Textile, cursive; }
.buttonlinks a:active {color: #CC9933;
text-decoration: none;
font-size:16px;
font-style: italic;
font-family: Textile, cursive; }
Any suggestions?
or class the links: <a class="buttonlinks".....>.
-- like so - a:link.buttonlinks etc.
I dont' think that your HTML is callng for the class correctly. Usually easiest to go with the former.
<edit>for an oops</edit>
>Either class the table: <table class="buttonlinks".....>
I tried that and it didn't work--text didn't change on mouseover.
>or class the links: <a class="buttonlinks".....>.
<-- like so - a:link.buttonlinks etc.
I tried that also with the same result as above.
>I dont' think that your HTML is callng for the class correctly.
That's what I'm thinking also.
Hi Antidote45
>You said you "put this code above all other link commands"... If you have anything else lower down in your CSS file about a.buttonlinks it will override what you have above it. I'm not sure that's what you meant but if that's the case that could be the problem.
I put the code back the way I mentioned above and put it at the bottom of the css and still not applying the requested font, colors, size, etc. It seems to be picking up the a:link code for regular link text.
I don't have a:buttonlinks but I do have a:link, etc.
I have always set up different classes for links the way I mentioned in my post above, i.e.,
.buttonlinks a:link, etc.
.menulinks a:link, etc
.footerlinks a:link, etc.
and the usual for text links:
a:link
Am I doing this wrong?
This isn't the first time I've had this kind of problem with a specific class for links picking up the regular link data.
<table class="buttonlinks".....>
or if:
declarations are emended to - a:visited.buttonlinks {etc.
However, I have noticed a typ0 in the code, which I must have automatically fixed before. Is this typ0 still in your code?
.buttonlinks a:link {color #FFFFcc;
text-decoration: none;
<edit>Jiminy! I'll bet it's just the typ0. I see no real reason for it not to work.</edit>
However it still doesn't work. It is picking up the data from regular text link code:
a:link {
color: #CC9933;
text-decoration: none;
font-weight: bold; }
a:visited {
color: #CC9933;
text-decoration: none;
font-weight: bold; }
a:hover {
color: #FFFFCC;
text-decoration: none;
font-weight: bold; }
a:active {
color: #FFFFcc;
text-decoration: none;
font-weight: bold; }
notice the colors are backwards and no font family specified in this one and I have bold turned off for buttonlinks and italics on. So it's picking up this instead of buttonlinks.
The only solution I see is to rename the regular text link to something else but then I'll have to specify it on every page.
There has to be a bug causing it to pick up the wrong css code.
The buttonlink code is the only one where I have the link and visited set to ffffcc and hover to an orange color. All other links have mostly opposite colors so I can't figure out what's messing this up.
A.Class:link
a.buttonlinks:link {}
font size, color, font family are all working now.
What did you mean by the A.Class:link?
