Hi,

Using Wordpress 321 and Atrahualpa 367 - ata-round

My work-in-progress Web site is here:
http://julesgobeil.com/wpfr/

Searching has found a few suggestions to underline links when hovering in widgets but they don't seem to work:

.widget ul li a:hover {
text-decoration: underline !important;
}

div.widget a:hover {
text-decoration: underline !important!;
}

Any suggestions ?

Thanks
Jules

you have to get an understanding of CSS. If you have two rules that could apply to an element, the more specific will win out, so if you coded

.widget ul li a:hover {
text-decoration: underline !important;
}

but there is also a

div.widget ul li a:hover {
text-decoration: none;
}

the second wins out

Thanks for your answer.

Last week, you have shown me that a CSS element that sits on another element will cover the bottom element. The least I could do before posting this question was to check that.

I cannot find any occurrence of "text-decoration: none" attached to hover parameters. All hover CSS has the underline text-decoration.

The links are underlined everywhere when hovering, except in the Categories widget. I spent hours trying to understand why !

What could be wrong ?

add the following to CSS Inserts

div.widget a:hover {
	text-decoration: underline; 
	}

Many thanks for your help.

As I wrote in my first post, I have already tried your suggestion: the only difference being that I added !important. Unfortunately it doesn't work, with or without !important.

I'm beginning to think something is wrong with my installation. File or line missing, or maybe a curse...

I care to have all links underlined when hovering because it is important for color blind persons.

Any thoughts ?

Thanks for your help
Jules

did you put it at the end of your CSS Inserts?
I don't see it in the page source.

You have a LOT of additional CSS that looks like it was lifted from somewhere else and it could cause the issue.

Oh ! I removed it because it didn't work.

The extra CSS code after /* +++ TTG +++ */ is used by my header, menu and footer which are imported from my Web site. All 3 work well.

I guess you found the problem. Putting the underline/hover code before this extra CSS code doesn't work. Putting it at the very end doesn't work either but adding !important makes it work.

I did check this extra CSS code before posting for help and it doesn't relate to "widget". Also, the only "text-decoration" references are set to "underline". Tricky isn't !

It was then easy to find where the problem is by moving the underline/hover code up until it stops working.

I still can't believe that the line that causes the problem is this one:

/* ++++++++++++++++++++ TTG ++++++++++++++++++++++ */

Even worse, removing this comment line doesn't fix the problem...

This works:

/* ++++++++++++++++++++ TTG ++++++++++++++++++++++ */

div.widget a:hover {
	text-decoration: underline !important; 
	}

And this doesn't work:

div.widget a:hover {
	text-decoration: underline !important; 
	}

/* ++++++++++++++++++++ TTG ++++++++++++++++++++++ */

And this doesn't work either:

div.widget a:hover {
	text-decoration: underline !important; 
	}

And, changing the comment line to this one /* */ doesn't change anything.

Well, at least it works now ! Many many thanks for your help.
Jules

Problem solved