JQuery CSS conflict

Question

I am using the datepicker which renders incorrectly on my webpage. The date rows have a white outline when I roll over them. The jquery index.html test page ok as does my webpage when I comment out my existing CSS.

I have looked at the Jquery and as most of it is prefixed by "ui." there shouldn't be a problem. I've gone through the structure of the widget using Firebug looking for conflicts and have managed to find and clear a conflict on 'thead' tags. But I'm struggling to find any more. I suspect its a 'tr' or 'td' tag.

(I'm a bit surprised that not all the tags used by the widget have their own classes.)

I was going to go into the jquery code and see if I can add classes to the td and tr tags and then change the css to ignore any other formatting from attached CSSs. However, before I do that, is there an easier / better way of dealing with CSS conflicts?

Answer 1

in your stylesheet, force your properties with !important;

td:hover{
border-color:black !important;
}