Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Westi on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

font and link help in css

Status
Not open for further replies.
GiffordS

GiffordS

Programmer
May 31, 2001
194
CA
Once again I find myself struggling with css issues. Man, I miss the old days of the <font> tag. LOL. Anyway, my code is...

<style type="text/css">
body {background:#8ab3c0; scrollbar-base-color:#89b7ca; font:Verdana;}
a:link{text-decoration:none;}
a:visited{text-decoration:none;}
a:active{text-decoration:none;}
a:hover{text-decoration:none;}
.brown {font-color:#3e0202; font-size:12pt;}
.red {font-color:#510202; font-size:10pt;}
.blue {font-color:#b50909; font-size:12pt;}
</style>

The issues are as follows:

1) The link decoration still renders. All of my links have that ridiculous blue font color, etc. I've gone over it and over it from numerous references, and it really seems that code should work.

2) The font colors in the spans all render as black. The size variations are picked up and rendered properly, but the colors do not change. Again, when looking this up it seems it should work.

Thanks in advance for any help offered.
 
Sort by date Sort by votes
1) Re: Decoration-
Try just setting "a { text-decoration: none; }" rather than a:link, a:visited, etc. Using just 'a' sets the styles for all instances of links, including :hover and :active.

Re: blue font color-
You have to change that using the 'color' property.


2) 'font-color' should just be 'color'
 
Upvote 0 Downvote

Switch the order of your definitions... switch active and hover around. The mneumonic is L(ink) O V(isited) E - H(over) A(ctive) T E[smile]

Instead of using font to set the font family... use font-family. That will give them back the font color.

Keep it up... it's worth it!

Cheers,
Jeff

PS: Good advice on setting the text-decoration to none on the a tag to save doing it on the others :)

 
Upvote 0 Downvote
<style type="text/css">
body {background:#8ab3c0; scrollbar-base-color:#89b7ca; font:Verdana;}
a:{text-decoration:none;}
.brown {color:#3e0202; font-size:12pt;}
.red {color:#510202; font-size:10pt;}
.blue {color:#b50909; font-size:12pt;}
</style>


This incorporated both suggestions as I understood them, but had absolutely no effect. The more I look, the more confused I get. I keep wondering if the problem is with my spans, but those are so straightforward that it's hard to mess them up. <span class="red"></span> etc. Besides, the text-decoration setting would apply across all spans. Very frustrating. It's almost as if something is throwing it off before it gets to the a setting. Is there anything in my body section that I'm missing? I just noticed as well that the scrollbar is actually coming up as the same color as the body background. I hadn't noticed it before because I was viewing it in Mozilla, which does not paint scrollbars.

 
Upvote 0 Downvote
Remove the `:' after the 'a' for the link style. Also, your scrollbar color is very close to the background color, which is why it looks the same.

Try this:
Code: 
<style type="text/css">
body { background-color: #8ab3c0; scrollbar-base-color: #89b7ca; font-family: Verdana, Arial, sans-serif; }
a { text-decoration: none; }
.brown { color: #3e0202; font-size: 12pt; }
.red { color: #510202; font-size: 10pt; }
.blue { color: #b50909; font-size: 12pt; }
</style>

If it doesn't work, post your HTML (including the DOCTYPE if you have one).
 
Upvote 0 Downvote
I removed the ":" after the "a". It had no effect whatsoever. I will post as much of the html as I can. This is generated dynamically via php queries so there is nto a lot of static content. But I can certainly post the structural html.

<html><head>
<style type="text/css">
body {background:#8ab3c0; scrollbar-base-color:#89b7ca; font:Verdana;}
a{text-decoration:none;}
.brown {color:#3e0202; font-size:12pt;}
.red {color:#510202; font-size:10pt;}
.blue {color:#b50909; font-size:12pt;}
</style></head><body><center>
<span class="brown">Text Here</span><span class="brown">
<table cols="5" border="0" width="90%" cellspacing="6" cellpadding="3">
<tr><td width="25%" align="left" height="10"></td><td width="35%" align="left"></td>
<td width="10%" align="left"><td width="10%" align="left"><td width="20%" align="left"></tr>
<tr><td width="25%" align="left"></td><td width="35%" align="left"></td>
<td width="10%" align="left"></td>
<td width="10%" align="left"></td>
<td width="20%" align="left"></td></tr>
<tr><td width="100%" colspan="5" height="10"></td></tr></span><span class="red">";

Query here that generates table content. The following section is repeated for each query result returned.
<tr><td width="25%" align="left"></td>
<td width="35%" align="left"></td>
<td width="10%" align="left"></td>
<td width="10%" align="left"></td>
<td width="20%" align="left"></td></tr>

And then I finish the table and span.

<tr><tr><td width="100%" colspan="5" height="10"><hr></td></tr></table></span></body></html>
 
Upvote 0 Downvote
try

Code: 
table td a {text-decoration:none;}

in fact

Code: 
table a {text-decoration:none;}

will probably work if the problem is what I am thinking of

Foamcow Heavy Industries - Web design and ranting
Target Marketing Communications - Advertising, Direct Marketing and Public Relations
I wonder what possesses people to make those animated gifs. Do you just get up in the morning and think, "You know what web design r
 
Upvote 0 Downvote

Gifford... look closely at my initial post:
Instead of using font to set the font family... use font-family.
Click to expand...
By using just font (and not specifying all the font properties you want to set at once) you effectively reset all other font properties... including the color.

Once that's fixed your use of colors, push the generated html source (and the CSS) through a validator... and see if it picks up anything.

Let us know specifically what problems have been solved and what remains with your next post.

Cheers,
Jeff
 
Upvote 0 Downvote
Ok, I swear I am not menatlly challenged. The last two responses were a little hard to follow, but here is what I came up with regarding table a etal

<style type="text/css">
body {background:#8ab3c0; scrollbar-base-color:#89b7ca; font:Verdana;}
table a{text-decoration:none;}
.brown {color:#3e0202; font-size:12pt;}
.red {color:#510202; font-size:10pt;}
.blue {color:#b50909; font-size:12pt;}
</style>

This produced no change whatsoever. The font colors still remain default black through the spans, though the font sizes do change.

As for the direction to change "font" to "font-family".... I'm sorry, I honestly have no idea where I am supposed to do this. Can you be more specific? I don't have anything that says "font" in the class definitions. Should I be using

.blue{font-family:#b50909? .blue{font-family; color:#b50909??

I'm not ignoring your suggestion, I just don't fully understand how / where it is to be implemented.
 
Upvote 0 Downvote
No, you have "font:Verdana" in the body, after you set the scrollbar color.
 
Upvote 0 Downvote
the "font:verdana" in the body section would have no impact on the color changes in the class definitions. Just for grins, though, I gave it a shot. No effect at all. Thanks for the thought, though.
 
Upvote 0 Downvote
Is this running on your own server by any chance or do you have a host?
 
Upvote 0 Downvote
no, it's a host. Why would that matter to something as simple as font color and text decoration?
 
Upvote 0 Downvote
If you were running your own server, some servers need to be shut down and restarted for changes to take effect.

Since you are using a host, could you post a URL?
 
Upvote 0 Downvote
I've not been able to replicate your problem using your code. I put a link in the table and it wasn't underlined, it was blue but there is nothing telling it not to be blue.

From what I understand this is the HTML generated by your PHP, taken from your earlier post. I've added a link in the table and put some tabs in to show the formatting.

It's full of errors which may, or may not, be contributing to the problem. This may be a result of the way you copy/pasted the code out - for instance if you took it from your PHP source. If so, try copy/pasting from the outputted HTML.

Code: 
<html>
<head>

<style type="text/css">
body {background:#8ab3c0; scrollbar-base-color:#89b7ca; font:Verdana;}
a{text-decoration:none;}
.brown {color:#3e0202; font-size:12pt;}
.red {color:#510202; font-size:10pt;}
.blue {color:#b50909; font-size:12pt;}
</style>
</head>

<body>

<center>
<span class="brown">Text Here</span>
<span class="brown">  [COLOR=red]I don't think you can put a table in a span[/color]

<table cols="5" border="0" width="90%" cellspacing="6" cellpadding="3">
	<tr>
		<td width="25%" align="left" height="10"></td>
		<td width="35%" align="left"></td>
		<td width="10%" align="left">[COLOR=red]td tag not closed[/color]<td width="10%" align="left">[COLOR=red]td tag not closed[/color]<td width="20%" align="left">[COLOR=red]td tag not closed[/color]
	</tr>

	<tr>
		<td width="25%" align="left"></td><td width="35%" align="left"></td>
		<td width="10%" align="left"></td>
		<td width="10%" align="left"></td>
		<td width="20%" align="left"></td>
	</tr>

	<tr>
		<td width="100%" colspan="5" height="10"></td>
	</tr>

	</span>	  [COLOR=red]if this is closing the span I marked at the top, it's overlapping the table, certainly can't do that[/color]

	<span class="red">";[COLOR=red]Can't open a span here, we are in the table but not in a cell or row - I think the semi colon is also an error[/color]

	<tr>
		<td width="25%" align="left"></td>
		<td width="35%" align="left"><a href="#">[COLOR=red]I added this test link[/color]</a></td>
		<td width="10%" align="left"></td>
		<td width="10%" align="left"></td>
		<td width="20%" align="left"></td>
	</tr>


	<tr>
	<tr>   [COLOR=red]Table row already started, you can't start another until you close the previous one[/color]
		<td width="100%" colspan="5" height="10"><hr></td>
	</tr>

</table>
</span>	  [COLOR=red]See earlier comments on spans[/color]
</body>
</html>


The coding errors do not really explain why the link styling doesn't work for you but does for me. However, I would urge you to fix them in case they are contributing to the problem - which is certainly possible.

Foamcow Heavy Industries - Web design and ranting
Target Marketing Communications - Advertising, Direct Marketing and Public Relations
I wonder what possesses people to make those animated gifs. Do you just get up in the morning and think, "You know what web design r
 
Upvote 0 Downvote
I forgot to mention the <center> tag. It's opened but never closed.... and it's depracated, you should use CSS to centre the content.

Do you have any style sheet overrides turned on in your browser?

Foamcow Heavy Industries - Web design and ranting
Target Marketing Communications - Advertising, Direct Marketing and Public Relations
I wonder what possesses people to make those animated gifs. Do you just get up in the morning and think, "You know what web design r
 
Upvote 0 Downvote
foamcow,

You are correct in that the code I posted is full of errors. I had to hack it up quite a bit before I could post it. I did a poor job of that, I'm afraid. The page itself is in the secure area of a site and lists member info that I cannot post on here for obvious reasons. This meant that I post sort of a mix between rendered code and the code that appears in the script. This explains all of the random spans and stray quotes and semicolons. The actual script does not contain those errors. I do still use the <center> tag out of habit, but it is closed in the actual page. I'm really trying to transition between older html and css, which is why I am here a lot. I make a ton of mistakes just in the translation. Anyway, I fiddled with it some this morning and have almost everything working as I need. This is what I have for css right now:

<style type=\"text/css\">
body {background:#8ab3c0; scrollbar-base-color:#89b7ca; font:Verdana;}
a:link{text-decoration:none;}
a:visited{text-decoration:none;}
a:active{text-decoration:none;}
a:hover{text-decoration:none;}
.brown {color:#3e0202; font-size:14pt;}
.red {color:#510202; font-size:10pt;}
.blue {color:#b50909; font-size:12pt;}
</style>

I had to add back in the a:link etc rather than just using a{ or a:{ on it's own. Once I added the link, visited, etc. everything started to work as far as font colors are concerned. I'm not sure what was off before, it could very well have been a stray mark from the php but nothing has been changed in the document below the </style> tag. I changed the css enough times now that I can't honestly say there wasn't a quote that didn't get slashed or something like that. Anyway, thanks everyone for your help. I am still curious, though, as to why a:{ or a{ didn't work. Was that suggestion correct?

 
Upvote 0 Downvote
you should specify the a psuedoclasses in the following order:

Code: 
a:link{text-decoration:none;}
a:visited{text-decoration:none;}
a:hover{text-decoration:none;}
a:active{text-decoration:none;}

I repeat, when I tried your code a simple definition for "a" worked fine.

As for the use of "a:", I don't know why it would be used, what it would do or whether it would work. I don't know of a reason to specify a style in that way.

For posting the code... why not view source on the page when it's loaded into your browser and copy paste that? Surely that would show just the HTML output that is generated by your PHP code?
Also, try and post code examples between [ code ] [ / code ] tags and it will be much easier for people to dissect.

If I were you I would go back to complete basics to find out why this simple thing isn't working for you.
Just make a page with NOTHING on it but a properly formed <a> tag.
Then put a single style rule in the <head> of your document and see if it alters the style of the link.
Build your page up from there and see where it breaks.

Foamcow Heavy Industries - Web design and ranting
Target Marketing Communications - Advertising, Direct Marketing and Public Relations
I wonder what possesses people to make those animated gifs. Do you just get up in the morning and think, "You know what web design r
 
Upvote 0 Downvote
foam,

I will probably do that at some point. As for why I couldn't do a simple view source from the browser output, I guess I didn't explain very well. The output is full of confidential member information, and is a few hundred rows long. The code that I posted was a mish mash of browser output that I had hacked out the content from and the original source code that I did my best to unslash. End of a long day and I made a hash of it. What else do you want me to say?
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
814
spamjim
spamjim
jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
1K
spamjim
spamjim
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
812
pmonett
pmonett
PeDa
  • Locked
  • Question
CSS two level horizontal menu
Replies
0
Views
637
PeDa
PeDa
lmcate
  • Locked
  • Question
From HTML Page open an MDB files on the server and work
Replies
0
Views
223
lmcate
lmcate

Part and Inventory Search

Sponsor

Back
Top