Welcome to WebmasterWorld Guest from

Forum Moderators: incrediBILL

Message Too Old, No Replies

Underline Links in CSS



1:08 am on May 6, 2013 (gmt 0)

5+ Year Member

Re-designing my brothers catering website..... links are set in the CSS to be underlined and with the underline to remove and link change to green on mouse hover.

On this page.... [chiarellos.com...] The links look just fine when viewing in IE but when I open up in the Firefox browser the underline is way to close to the bottom of the letters....maybe something to do because i altered the font size in the actual HTML coding.

Any ideas on how to make it look better?


2:00 am on May 6, 2013 (gmt 0)

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month

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>


2:35 am on May 6, 2013 (gmt 0)

5+ Year Member

Thanks for the great tips.... I was able to work around it using the border-bottom for that specific area


3:27 am on May 6, 2013 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member

Never use * to select all elements because it selects all elements and slows things down. And then you're setting some of those to some other state after that.


6:30 am on May 6, 2013 (gmt 0)

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month

Don't know about the rest of youse, but I start with a short list of things that really do have browser defaults I might want to override. So a generic

h1, h2 etc to make all headings centered and non-bold, with margin and line-height the way I like them

and another generic

div {margin: 0; padding: 0;}
table {font-size: inherit; font-family: inherit;}

to be safe. My preferred line-height and default margin for paragraphs and lists... et cetera.

Not much you can do about Opera, which has a list as long as your arm of default fonts for every property known to man.

Featured Threads

Hot Threads This Week

Hot Threads This Month