Make links more distinct

[Phanx]

Currently, there is no visual difference between a link and a bit of text that's not a link, unless your browser is underlining links. I don't know if all browsers do this by default, but some (maybe all?) browsers have an option to not do it, and it's an option I use, since most of the time the underlines aren't necessary.

Usually, sites define a different color, font weight, background color, bottom border (1px dotted on link/visited, 1px solid on hover/focus/active looks nice), etc. or explicitly define the underline if that's the only visual cue they're using.

I normally have a custom stylesheet applied on wowinterface.com, but just had to reinstall my browser due to unrelated bugginess, and noticed the invisible links since I hadn't reapplied my custom stylesheet yet.

On a side note, your stylesheet is so messy... you used a WYSIWYG tool to generate it, didn't you?

[Dolby]

Nope no WYSIWYG and its fairly clean compared to a lot of sites imo, the stuff at the top is inserted by vbulletin automatically, the stuff thats all condensed at the bottom is my stuff, I like each item on one line. I could hack the vbulletin auto insert to do the same but whats the point? You should see style sheets that are squeezed.

Default content links are underlined and change to a light gold color when moused over, if your browser changes that you may want to disable that. It works the same and re-tested in Chrome, FireFox, Safari, iosSafari, IE9. Other links that don't have underlines will change color more dramatically or are obviously links.

test link

By default this has an underline in the above listed browsers and will change color when you put your mouse on it.

[Phanx]

Originally Posted by Dolby Nope no WYSIWYG and its fairly clean compared to a lot of sites imo,

I was referring mostly to things like dozens of repetitions of the same font-family property on elements that would normally just inherit that property from their parent. This means that my custom stylesheet has to redefine the font-family for dozens of things instead of just for the body element, for instance.

Originally Posted by Dolby Default content links are underlined and change to a light gold color when moused over, if your browser changes that you may want to disable that.

Yes, that's what I was talking about. Most sites use something other than the underline to differentiate links from their surrounding text, and since I personally think underlines are pretty ugly and make the text harder to read, I don't want to see them in addition to whatever cues the site is using, so I turned off the option in my browser to underline all links by default.

For example, some sites might have blue text with pink links, or regular-weight text with bold-weight links, or a gray background with white backgrounds on links. All of these cues are plenty distinct without the ugly underline.

Most sites that do not use another cue explicitly specify "text-decoration: underline" or "border-bottom: 1px solid" in their stylesheets, so that users whose browsers don't underline by default can still see the links.

If you want the only visual cue that something is a link to be an underline, then adding "text-decoration: underline" is an extremely simple change you can make in the CSS that ensures this cue is available to users without default underlining, and has no effect whatsoever on users with default underlining. That was my suggestion; sorry if it was unclear.

Edit: Yes, the links change color when moused over, but I generally don't make a habit of running my mouse over everything on the page to find out if it's a link.

[Dolby]

Originally Posted by Phanx I was referring mostly to things like dozens of repetitions of the same font-family property on elements that would normally just inherit that property from their parent. This means that my custom stylesheet has to redefine the font-family for dozens of things instead of just for the body element, for instance.

Might be the vbulletin default css doing that. Only time I normally set font family is when I switch the font family like for titles, etc. Some of the CSS is from 2006 so I may have 1 or 2 extra font family redefined when they dont need it /shrug.

Edit: looking at the CSS its mainly when I set the font to something other than the default verdana some titles, tabs, etc use Georgia.

Originally Posted by Phanx Yes, that's what I was talking about. Most sites use something other than the underline to differentiate links from their surrounding text, and since I personally think underlines are pretty ugly and make the text harder to read, I don't want to see them in addition to whatever cues the site is using, so I turned off the option in my browser to underline all links by default. For example, some sites might have blue text with pink links, or regular-weight text with bold-weight links, or a gray background with white backgrounds on links. All of these cues are plenty distinct without the ugly underline. Most sites that do not use another cue explicitly specify "text-decoration: underline" or "border-bottom: 1px solid" in their stylesheets, so that users whose browsers don't underline by default can still see the links. If you want the only visual cue that something is a link to be an underline, then adding "text-decoration: underline" is an extremely simple change you can make in the CSS that ensures this cue is available to users without default underlining, and has no effect whatsoever on users with default underlining. That was my suggestion; sorry if it was unclear. Edit: Yes, the links change color when moused over, but I generally don't make a habit of running my mouse over everything on the page to find out if it's a link.

Alright thanks for your feedback