Underlining is pretty much at the whim of the browser, in conjunction with the locally installed font. Even if you force a font by name-- which I really really wish people wouldn't do for body text-- you can't be sure that, for example, the user's Palatino is identical to your own Palatino.
Option B is {border-bottom...} in conjunction with {text-decoration: none}. This may give you a little more control. In some situations you can even benefit by setting a tiny bit of bottom padding; borders go outside of padding. And they're always further from the element than underlining is.
BUT WAIT. Underlined links are the html default, and are what most people expect to see in most situations. So even though it looks odd to you, the default underlining is exactly what the user sees every day and they probably don't even notice it. They'd notice it more if it were different.
maybe something to do because i altered the font size in the actual HTML coding.
Forcing a point size can become counterproductive, because if your user is uncomfortable reading it they're liable to go into their browser's prefs and/or menu settings and resize the entire page. So now they've not only made mincemeat of the one offending paragraph but of the entire page.
Now, you know perfectly well you're not supposed to post links-- especially not in the Code, Content and Presentation subforum, because people need to see the code as it exists today, not what it looks like next week after you've changed it. But as long as the link is there I had a look.
<span style="font-weight: normal; font-weight: bold; font-style: normal; text-decoration: none; font-size: 14pt;">
The one benefit of inline styles is that things you say inline will override absolutely everything. So if you've got a style-class conflict that you can't pin down, inline styles will let you ignore the problem a while longer. But it isn't a good permanent fix, for assorted reasons.
Speaking of which, I assume there is some arcane reason behind
font-weight: normal; font-weight: bold;
(Yes, "I forgot" counts as a reason ;))
:: continuing on to /reset.css ::
That long list at the beginning can be reduced to
*
meaning "everything". And, again, I assume there's a reason for
border: 0 none;
as opposed to and distinct from the later
* { border:none}
(See? You DO know about *.)
:: and further detour to style.css, which is what I was looking for ::
a {color:#a80002;text-decoration:underline;outline:none}
a:hover {text-decoration:none;color:#008040}
That's the meat of your question, right? No links needed.
I did notice also that if I hover over the links further up the page-- the ones in bigger type-- the background color changes too. I kinda suspect this isn't intentional.
:: further poking around CSS ::
#menu li a:hover, #menu .active a {text-decoration:none;background:url(../images/menu_bg.png) repeat}
Ah ha. Throw out all reference to the background. Your page is redrawing the background image just over the hovered area, so it no longer matches up with the overall background using the same image. It should work fine if you simply remove the reference to background. All you need is "text-decoration: none" to suppress the underlining.
Oh and
Pssst! <a href="index.php">Home</a>
NEVER! The form is simply
<a href="/">Home</a>
