homepage Welcome to WebmasterWorld Guest from 54.204.215.209
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld

Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

    
Underline Links in CSS
captainron19




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

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?

 

lucy24




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

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>
captainron19




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

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

drhowarddrfine




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

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.

lucy24




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

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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / HTML
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved