Multiple Link colors on one page? [Archive]

View Full Version : Multiple Link colors on one page?

three

01-03-2000, 09:23 PM

Is it possible to set different text link colors to differnt parts of the page with HTML?[nbsp][nbsp]For example, there are text links on a black bg as well as on a white bg.
suggestions? (besides using images)
thx

Deb

01-03-2000, 09:36 PM

You can accomplish this using extra HTML Font Color tags.[nbsp][nbsp]It's a lot of extra code but it's what I chose to do on aota.net as well.[nbsp][nbsp]Notice at the top of aota.net (on the knowledge base not here on the forums) where the links are white on a dark background, but within the actual content it's dark links on a white background.

I did this by actually specifying for each and every single place I needed it at.... view the source to see what I mean there...

If there is a better way please share :)

Deb
- You'll just have to work for it.

Justin

01-03-2000, 11:19 PM

If there is a better way please share If you know me you know I despise the tag, and yes of course there's a better way. First of all, making it simpler that using <a>link</a>, you can simply specify your color in the <a> tag:

<a href="http://foo.bar" style="color: #FF0000">link</a>

Or you can specify in your style sheet different colors for visited, unvisited, and hover links using a ... using something like this in the <head> section:

<style type=text/css>
a {
[nbsp][nbsp] color: #0000FF;
}

a:visited {
[nbsp][nbsp] color: #800080;

}

body {
[nbsp][nbsp] font-family: Arial, Verdana;
[nbsp][nbsp] font-size: 10pt;
[nbsp][nbsp] color: #000000;

}

.dark {
[nbsp][nbsp] font-family: Arial, Verdana;
[nbsp][nbsp] font-size: 10pt;
[nbsp][nbsp] color: #FFFFFF;

}

.dark a {
[nbsp][nbsp] color: #FFFF40;
}

.dark a:visited {
[nbsp][nbsp] color: #FF8080;
}
</style>

Using the above, you can do this within the body:

<a href="blah">Normal - Blue Link</a>


<a href="blah">Dark Background - Yellow Link</a>


The above style sheet will give you blue links (purple visited) with black text throughout the body, except when you are within the user-defined class "dark", in which case links are yellow (orange visited) with white normal text.

However, it does take a lot more than that for it to work in "the other browser" (we won't mention any names, nor will we give away any of our secrets ;) ) but the above should work by itself in IE. It takes some work, experimentation, patience, cuss words, lots of smokes, and lots of time to get CSS to properly work in Ne - er, "the other browser"... the above will work for the most part in both, and better in Opera than you-know-who -- it only has a problem when you combine CSS with nested tables (and lots of them).

Hope this helps.

------------------
Justin Nelson
FutureQuest Support

Jacob Stetser

01-04-2000, 06:22 AM

Even better and more compatible, use style sheets the way they're meant to be used and drop the span tags...

<a href="blah">Normal - Blue Link</a>

<a href="blah" class="dark">Dark Background - Yellow Link</a>

That's cleaner code and more like how they meant to use style sheets. DIV and SPAN are structural, rather than representational tags.. Tsk, tsk, Justin ;)[nbsp][nbsp]

Oh, and tag attributes should be quoted, despite the fact that both Netscape and the other browser let you leave the quotes out.

Hmm. Neither Justin's nor my code produces a dark background in my tests. And mine actually turns the of the light link white.

Ahh, got it...

Replace the .dark section with this:
.dark {
[nbsp][nbsp][nbsp][nbsp][nbsp]font-family: Arial, Verdana;
[nbsp][nbsp][nbsp][nbsp][nbsp]font-size: 10pt;
[nbsp][nbsp][nbsp][nbsp][nbsp]color: #FFFF40;
[nbsp][nbsp][nbsp][nbsp][nbsp]background : #000000;
}

and remove .dark a {...} entirely.

If you keep the tags, you'll need to also keep the .dark a {...} declaration. Both ways appear to work just fine in Netscape, _as long_ as you use the correct .dark class definition as I've outlined above. color: #FFFF40 defines the font color and background defines the background color. Both of us were missing that one before :)

Good luck!

[This message has been edited by Jacob Stetser (edited 01-04-00@09:22 am)]

Jacob Stetser

01-04-2000, 09:40 AM

Oh... and Justin, can you tone down the anti-Netscape rhetoric? CSS may not be perfect in Netscape, but neither is it in IE.. I invite you to visit www.webstandards.org (http://www.webstandards.org) to see what I mean. And you tell people that the simple CSS you wrote takes a lot more work to make it work in both browsers but it doesn't. With my modifications, the version of the code you wrote works just fine in both browsers.

I don't understand your total disdain for Netscape. I for one would _prefer_ choice in browsers rather than submit to the whim of Microsoft. A full download of IE5 is over 100 megabytes for pete's sake, and with MS's silly "integration" policy I have to deal with more security and stability issues than I want to think about.

Until MS integrated the browser and the OS, we didn't have so many web and email hacks that could actually get into your hard drive. MS violated the major rule of web browsers... you should be able to access the net, but you should also be safe from the net accessing you.

I used to use Outlook. I've switched to Eudora because it's what I use on the Mac and because when I switch off all the stuff that uses IE (HTML display, etc) and image display, it's a fairly secure email program. I don't have to download fixes to prevent people from gaining access to my hard drive through my email.

I have IE5, IE4, NS4.7 and NS3 on my machine. I tend to surf in IE5. I _prefer_ using it, but I'm glad there's a choice. If MS controls the browser, they control HTML and CSS, and all sorts of other web technologies, and THAT I do not want.

You may be on a crusade to get people to switch over to MSIE. But stop and think of the implications of switching everyone over to Microsoft products. We already give our lives to them.. In my company almost 2/3rds of the software on the machines is Microsoft... Windows, IE, Visual Studio, SourceSafe, MSSQL, IIS, FrontPage (for version control only), NT, and I don't know how many other products I don't know about.

It may make our lives easier in the short run to support only one browser, and that may be a reason to convince people to switch. But in the long run, I'm convinced that browser diversity helps maintain standards. Case in point... MSIE allows the underscore character in CSS names. Netscape doesn't. The standard doesn't either. MSIE is very forgiving about sloppy HTML. Netscape isn't. Neither is the standard.

You know, I downloaded a trial product from MS not long ago, called Vizact. It purported to be a web animation tool. In reality, it was simply PowerPoint-meets-IE5DHTML. And it sucked royally. But it's probably going to be part of Office2000.. Yet another way to keep offices homogenized on Microsoft-only products. The boss gets to make his Vizact presentation and everyone has to view it in IE5. If they can't view it, they have to get IE5, says the boss. New standard.

Bottom line... without competition, we will see the same stagnation in MSIE that we have seen in other Microsoft products that have no real competition. So recommend IE all you want, but please, try to keep the revolutionary zeal to a minimum, and don't tell people simple CSS is a torture device in Netscape. (Hey, I'm a Mac user; I learned the part about revolutionary zeal the hard way ;) )
------------------
icongarden.com/?fq (http://icongarden.com/?fq)
icongarden: making good ideas grow.

sheila

01-04-2000, 10:35 AM

Besides, convincing everyone to use IE isn't a solution. The SunSparc Workstations at the University I attend won't run IE.

Also, I use Agent to read mail, and virusses that are designed to exploit MS type scripts don't affect me.

Deb

01-04-2000, 11:34 AM

heh -- The link is really sloppy and takes a lot of extra code but it works anywhere html works :þ

Deb
[nbsp]- No muss, no fuss.

Justin

01-04-2000, 11:50 AM

Jake - I did not post this to start a browser war again. I merely mentioned that Netscape does not fully support the CSS specification, and they even state this fact somewhere on their site. Opera has better support for CSS than Netscape does. I was simply warning that it will take more work for it to work right in Netscape.

Want an example? Set a font for the body of a document. Then open up a table. Hm, where did that font go?

Netscape seems to take CSS and internally render it as though you did use tags (since font tags do not extend into a table, though CSS should). So to keep your font in your tables, you have to do this:

body, td {
[nbsp][nbsp] font-family: whatever;

}

You have to duplicate it for your <TD>'s. However, it does not end here if you use nested tables...

Once you close two nested tables, your font size and family go away again. The only way to retrieve this again is to use a class -- now trippling the effort.

Take the CNC for example. I use nested tables to duplicate an IE feature in Netscape - colored table borders. I create an external table with a back color, then an internal table with <TR> backcolors that are the same as the document back color, with a cell spacing of 1. This gives me a colored border.

Once I close both tables I have to open a , where I declared ".body" above in the CSS. This of course defeats one of the purposes of CSS - I now, again, have to dig around and figure out where to add tags to keep my style throughout the CNC. If I add stuff, I have to open up Netscape and make sure the font stayed this time, adding the tag if not.

That was the intent of my warning - you cannot create CSS according to specifications, check it in IE, and just assume it will work in Netscape. If you do, you will be in for a surprize. It might work just fine with something simple, such as our above examples, but not for a real web site with tables and other complications. This was not to bash Netscape, only to warn that Netscape adds additional complications to the matter.

BTW - my above example was not meant to change the background color, but rather to be used where you already have a dard back color (such as within a table) -- though I admit to not being anywhere near a CSS expert.

Back to the off-topic topic: I don't understand the hate for MS. I don't know if this stems from the fact that you are a Mac user, or if it's the other way around... but I have never understood it. I am not a Mac hater, nor a Netscape hater - I use the OS of my choice, which happens to be Windows. Note, I do disagree with some of thier business practices.

I do understand the Netscape lovers - considering that not long ago, IE sucked, and Netscape was the better browser. But times change, and IE has kept up to the ever changing standards in my opinion, while Netscape has fallen behind a bit (not much, but I am picky). I myself am stubborn to a point, but when one product proves itself better than the other, I will forget about which product *used to be* better and move on.

I usually don't take sides on things like this - I have two PC's, one with a PIII and one with a K6-2. I still don't know which is better - the AMD and the Intel have their own good points... but it wasn't long ago that you could not choose what CPU you wanted in your PC/XT - it was Intel and that was it.

The only thing I don't understand is why more companies aren't writing browsers. There are millions of software companies out there... it seems someone would have taken the challenge, but there simply aren't enough other browsers that can do the everyday things like CSS, SSL, and so on.

To wrap this rant up, I like choice too. I have never tried to impose my choice of browser on anyone else - take a look at ANY site I have ever designed or had a part in. They will look identical in both IE and Netscape. I was simply giving a warning to someone who probably does not plan to use my suggestion anyway, letting them know that they will need to work to get it to work in Netscape. Had I been trying to push IE, I would not have mentioned this fact, let them write IE specific code without knowing it, and there would be one more site on the net that doesn't work in Netscape - yeah, a conspiricy. Give me a break.

------------------
Justin Nelson
FutureQuest Support

Jacob Stetser

01-04-2000, 02:13 PM

Justin,

Sorry if I came down hard.. I've been in a grumpy mood this morning and I've seen you dissing Netscape a lot lately. I don't hate Microsoft... I disagree with the way they do business and am dismayed at the general quality of their products. Part of the reason IE is better than Netscape (IMHO) is because Microsoft was forced to compete, and compete hard, with Netscape in order to win the browser war.

I use a Windows machine at work and it has been a real eye opener. It's easier to use than I would have thought and I've become as proficient navigating Windows as I am on a Mac. But the stability of Win98 (I can't run NT as I need dual monitor support and USB support.. why doesn't NT have these in this day and age) is deplorable, and I had always heard that PCs were more stable.

So I'm disappointed in Microsoft, but I don't hate them. I want them to compete like everyone else and make good products. That's why I use IE on both the Mac and the PC. It's why I have considered one of those Intellimouse Explorer mouse thingies.

Anyhow... CSS is a real nightmare in both browsers if you're trying to be compatible. Neither of the companies have been really expedient in adopting HTML 4.0 either, and that was finalized 2.. almost 3 years ago.

I just tried some sample code to demonstrate what you mean.. There does appear to be a bug in the implementation... I tried defining a class .myclass { font-family: verdana } and first applied it to the body <body class="myclass">. This resulted in all non-tabled areas bearing the font I wanted.

I then applied <td class="myclass"> to parts of nested tables which contained text.. All 3 levels of nesting now successfully showed the correct font, but the last "testing" (after closing all table tags) was in the wrong font.

I suppose now isn't the best time to say that true HTML4.0/CSS frowns on the use of tables for layout anyway? :) :) :) *grin*..

I know you take great pains to make your sites viewable in both browsers, Justin, and I didn't mean to come down so hard on you. Forgive me? :):-0

I also now understand what you were talking about when you mini-ranted about Ne- er, the other browser ;) ... but I didn't before because I hadn't come across that problem before.

Solution? everything before tables<table>...</table>everything after tables etc. Not the best solution but not necessary to span everything either.

And if you automate the HTML generation, it's a piece of cake :)

------------------
icongarden.com/?fq (http://icongarden.com/?fq)
icongarden: making good ideas grow.

Justin

01-04-2000, 10:22 PM

I appologize for getting over-excited about the issue. Really it's not *that* big a deal, who likes what browser. I just wanted to make it clear that while I do not care for Netscape myself, I do make the effort to ensure that no site I design attempts to push any one particular browser. Plus I wanted to give a little forewarning of what was to come for compatibility... though I admit that I may have made it sound more difficult that I should have.

At any rate, browser compatibility is a difficult issue, no matter which side of the IE/NN fence you are on.

From now on I will be careful with what I say regarding browsers (eg, no more Nescape or WebTV bashing)... I do get carried away sometimes, though I usually mean it in a more humorous nature than it might appear. For that I am sorry.

I didn't mean anything against you personally, Jake :)

BTW - HotBot uses CSS exclusively (last time I was there) for formatting, but I haven't learned that much yet. Tables are easier (especially when generating the output dynamically in a script :))

------------------
Justin Nelson
FutureQuest Support

Deb

01-05-2000, 12:16 AM

There are three options posted above that can help accomplish the task at hand.[nbsp][nbsp]All three have good and bad sides to them.[nbsp][nbsp]

I can only hope that everything in this thread that has nothing to do with differing link colors would be magically edited out as I doubt it really needs to be here.

The question was simple and sincere, as are the answers to it.[nbsp][nbsp]Regardless of what browser the webmaster prefers we all know it's best to try and make sure the site itself works for all, because the Internet is diverse and we all prefer to see it that way.... nothing to become hostile about just something to be aware of.

Deb
[nbsp]- I almost edited but chose freedom of speech instead.

Dan Kaplan

01-05-2000, 12:25 AM

Justin, I can't help but wonder if the extra coding required to make CSS work similarly in Netscape doesn't defeat the purpose of avoiding the tags?[nbsp][nbsp]I imagine it saves a little bit of code, but at what expense of time and patience?
you cannot create CSS according to specifications, check it in IE, and just assume it will work in Netscape. Let's see if I can say this in as browser-war-neutral a manner as possible...[nbsp][nbsp]That's precisely why many people prefer to design in Netscape and proof in IE -- you know what you'll get.[nbsp][nbsp]I don't follow CSS too closely (you probably couldn't guess that from my above comments ;)[nbsp][nbsp] ), but I don't know of any other areas where IE follows specs closer than Netscape.
The only thing I don't understand is why more companies aren't writing browsers. I'm all for competition, but I'm not so sure this would be a good thing.[nbsp][nbsp]Two or three major names battling it out should be sufficient to keep things honest, much more than that would be a nightmare for cross-browser consistency. :(

As much as I dislike Microsoft's business practices, I think they're one of the best things the computer industry has going for it.[nbsp][nbsp]Their market clout pretty much forces the compatibility issue on everyone else.[nbsp][nbsp]Few people would risk making a non-MS compliant product.

Dan

edit: To avoid looking like a rebellious hypocrite, I really started typing this before Deb's last message...[nbsp][nbsp]At least it's *somewhat* related to the original question.

[This message has been edited by Dan Kaplan (edited 01-04-00@12:29 am)]

Jacob Stetser

01-18-2000, 11:48 PM

Hey peeps. I realized something a couple of days ago and wanted to post it...

most text should be enclosed in

...... that's the tag to be redefining with stylesheets.. not body, not td, etc.. I can't believe it took me this long to think of it.

Why? Because even though inheritance should allow attributes such as font to fall through from higher level tags, I think the standard _may_ require the wrapping of freeform text in

... and that not using that or another block level HTML tag to mark the text is against the rules.

Netscape gets confused by improper HTML and thus doesn't render 'properly' the CSS inherited styles. IE is more forgiving :)

I believe I tested this about a week ago and it worked for me.. define and redefine P using classes and you should be all set, and you're NOT losing the structure/presentation distinction that you do when using SPAN or DIV.

YMMV.

Note: difference between span and div... div are block-level, meaning they can hold just about any element except page-level. span are inline, meaning that span is _only_ meant to contain text, and _maybe_ other inline tags (I'll have to check that)... the importance comes when you're dealing with using style sheets for layout.. :)

HTH.
------------------
icongarden.com/?fq (http://icongarden.com/?fq)
icongarden: making good ideas grow.

Justin

01-19-2000, 12:45 AM

I've never used

tags... it's difficult to handle line breaks with them IMO... plus with formatting I believe there is a mandatory break on both sides of the text surrounded by

 tags, similar to a blockquote but of course w/o the indenting...

Hard to explain, but I've never used

, rather just text and
's. I agree that it *might* be the cause of the CSS problems, but I thought CSS was supposed to let us do away completely with HTML, eventually - start out complimenting it but eventually replacing it... For example, you could use CSS for formatting and layout rather than tables - never a need for a tag - and so on...

At any rate, you might be correct (I really don't know) - but even if so, I'll probably stick to my text littered with
tags :)[nbsp][nbsp]For now anyway...

------------------
Justin Nelson
FutureQuest Support

Rain

02-11-2000, 03:09 AM

Well, I am doing the solution.[nbsp][nbsp]But am finding that my page always overides it w/ the link color set for default.[nbsp][nbsp]I took out the...
<body bgcolor="#FFFFFF" vlink="#999966" text="#330099" link="#990099"> .
But found that the link color would then just go to the default bright blue. I am using Dreamweaver so I am not sure if that is the problem.[nbsp][nbsp]I went through all of the help files and manual w/ the software but can't find how to turn that basic default off or is that just a basic Html thing.
Any suggestions, w/o getting into that NS/IE CSS nightmare?
If you want to see my page it is at http://nurturethis.com/tablehelp.htm
I'd like the links in the right column to just be white w/ an underline with links elsewhere in the dark purple.
Is CSS the only answer for me?
Help!
Thanks.
Rain

John Kennett

02-11-2000, 01:43 PM

I've cracked this one. It took a bit of fiddling around to work out what was causing it, but I knew it could be done because I use it for the navigation bar on www.rib.net (http://www.rib.net) :)

The answer is in the tag order. The tags must be enclosed within the <a> tags.

ie[nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp]<a href="/index.htm">
[nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp]
[nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp]Nurture This
[nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp]
[nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp]</a>works, but[nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp]
[nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp]<a href="/index.htm">
[nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp]Nurture This
[nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp]</a>[nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp]
[nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp]doesn't!

NB It doesn't work with IE3, but does work with NS3 or IE/NS 4+

BTW you've also got some cells with the colour incorrectly defined: bgcolor="a5b5a5" should be bgcolor="#a5b5a5"

John