Forum Moderators: buckworks
I have put several lines of code like this in my navigation table;
<td height="50" align="center" width="110"><a href="widgets.html" name="Widgets"><b><font color="white" size="-1">Coming Soon</font><br>Widgets</b></a></td>
These create spaces on the screen with "Coming Soon" in white letters, with "Widgets" directly below in yellow letters (my default color?). There are several such spaces lined up next to each other (I use "Coming Soon" because I will be adding pages for more widgets a I create them).
I have all the <a>s set for "Decoration None", except for Hover which is set for Underline. Also, the Hover color is red.
'Problem is that it looks perfect in my editor's "Launch Browser" (I use Homesite), but not when opened for real on the internet. In the "Launched Browser", the words "Coming Soon" are white, and the word "Widgets" (not the real word) is Yellow. When my cursor goes over the word "Widgets" on the screen, "Coming Soon" (white in color) is underlined in white, and "Widgets" (turned red in color) is underlined in red. This is perfectly what I want.
However, when opened on the actual internet, two things go wrong. First, on hovering, "Coming Soon" (stays white as planned) and "Widgets" (turned red as planned) are all underlined in red (this I could easily live with). Also, and this is the part that is really driving me nuts, on one of the many navigation "words", when I hover on it, only about 3/4 of the words "Coming Soon" show the underline (which as I just said is a red underline). On hover, this partial underline is so obvious that it is distracting. On most of the navigation words, the underlines cover the entire "coming Soon" phrase. I cannot find any difference between the code for the words and phrases that work and the words or phrases that don't.
I have saved this stuff as a text file to look for grammatical errors that wouldn't show up in HTML, and have validated the code. I have opened it with Arachnophilia to see if it looks any different, and a couple other things that I have tried in the past to find elusive problems, but this one still escapes me.
I repeat, it all works perfectly in Homesite's browser, but not on the internet.
Any ideas?
Thanks,
Bo
If it's working locally and not on the Internet, the only thing I can presume is there is either a difference in the way you're referencing the CSS or a caching issue with the browser.
You say it's valid code, but really this is impossible with the <font> tag in there. (?) In case you didn't know, HomeSite has an internal validator. If you go to Options->Validation and check HTML 4.0, then use Tools->Validate Current Document, it should give you a warning that the <font> tag has been deprecated (since about 1996?)
But in any case: the approach you're using, coloring some text within an anchor, is bound to give some oddities. When you apply CSS to an anchor, you much consider all four states: a, a.visited, a.active, and a.hover. So you have these four selectors, then within that you try to apply a universal "white" selector using the font tag. Here is a better approach:
the words "Coming Soon" are white, and the word "Widgets" (not the real word) is Yellow. When my cursor goes over the word "Widgets" on the screen, "Coming Soon" (white in color) is underlined in white, and "Widgets" (turned red in color) is underlined in red. This is perfectly what I want.
<style type="text/css">
/*
default links. I've used plain text color names,
but these should really be hex values: #ff0000; etc.
Also the visited and active colors should always be
different than the respective default and hover colors,
but I've made them the same for this example.
*/
a:link { color: yellow; font-weight: 700; text-decoration: none; }
a:visited { color: yellow; font-weight: 700; text-decoration: none; }
a:hover { color: red; font-weight: 700; text-decoration: underline; }
a:active { color: red; font-weight: 700; text-decoration: none; }
/*
Define a class for your white links. This will
pick up BOTH the text-decoration and font-weight from
the default pseudo-calss above.
*/
a.wht:link { color: white; }
a.wht:visited { color: white; }
a.wht:hover { color: white; }
a.wht:active { color: white; }
</style>
So now all you need to do is:
<a href="widgets.html" class="wht">Coming Soon</a><br><a href="widgets.html">Widgets</a>
There are probably more efficient ways to do this, but this should work.
Thank you for your quick and in-depth reply. I am going to do everything that you suggested, but I wanted to acknowledge right away. Since you were kind enough to answer, I will tell you a couple more things that happened since I first wrote;
1) Due to some info in other recent posts, my default browser is now Firefox. It turns out that my weird color and underline problems show up when opened with Firefox, but not when opened with IE. (I am still going to do everything you suggested. If anything else comes up, I'll try to let you know).
2) In my original post, I mentioned that I also looked at the code with "Arachnophilia". What I forgot is that when I first started doing this, I downloaded "Arachnophilia" as well as "Nvu" and a couple others. At one point, I could not get some things to line up on a page with Homesite, so I opened the page with Nvu, which has an option to "view tags". Right now, I can't even remember what it was that I found, but Nvo showed a couple of non-braking spaces (or breaks, or something) that did not show up in Homesite. When I erased them, the page started working in whatever editor I used to open it. I wish I could remember the details, because it might help someone else find an elusive error.
Thanks again,
Bo
