CODEWITHSUNDEEP
htmlcsshover
christophe
christophe

Reputation: 692

Why does text-decoration: underline not work?

On a a website I am currently working on, I have issues with underlining links on hover. Although declaring text-decoration: underline on hovering links, it doesn't work properly. I can't explain it myself.

Look at the website itself (it's the links on the bottom right corner): http://nils.zamaitat.de/#contact

It's the same with the dropdown menu "Projects" on the home section: The links that fade in can't handle the underlining properly as well: http://nils.zamaitat.de/#home

This is what I have in my CSS:

section.contact .links ul > li a:hover 
{
  text-decoration: underline;
}

nav ul li ul > li a:hover {
  text-decoration: underline;
}

Thank you very much in advance!

Upvotes: 4

Views: 25952

Answers (3)

jmoody1988
jmoody1988

Reputation: 108

Line 444 of style.css:

.contact div.links ul > li a

That's how the links in the bottom right are being initially styled. That means in order to override it, even when triggering it in an altered state, you need to call it by the same identifier inititially used with :hover appended to it, or you need to use text-decoration: underline !important; to force the rule to take place.

This situation is very common when css is overscoped and overcomplicated. It becomes easy to lose track of what identifier was targeted to which element.

.contact div.links ul > li a could be changed to just .contact .links a since you're using single level li elements and not a dropdown there.

Hope that helps.

Upvotes: 0

Giancarlo Colfer
Giancarlo Colfer

Reputation: 559

You have text-decoration: none; in style.css. This CSS is telling the browser to render all hyperlinks with no text decoration. You'll need to override that CSS by supplying the !important declaration.

So for the links that you would like to be underlined, simply add the !important declaration to its corresponding CSS ID or Class.

Example

Change from:

a.exampleLinkClass{text-decoration:underline}

to this:

a.exampleLinkClass{text-decoration:underline !important}

Upvotes: 3

Rolchau
Rolchau

Reputation: 114

Your CSS is just fine, no problems there.

Its the font - its not working properly in webkit browsers - It looks fine in firefox. Try changing the font to for example Helvetica and it works fine.

Now why its not working - pfff dunno ;D Never seen that font before.

EDIT: Ahhh its prolly your font-face, you have only supplied a eot file. From css3please.com:

@font-face {
  font-family: 'WebFont';
  src: url('myfont.woff') format('woff'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
       url('myfont.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}

So you need to supply a woff type also - you can generate it on fontsquirrel.com

Upvotes: -1

Related Questions