Question

When using jquery.ui.datepicker,I got a empty div in my page.And it is not hidden. you can see what it looks like:

I use firebug inspect the code:

<div class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" id="ui-datepicker-div"></div>

And I checked the css by firebug,it shold be hidden,the css is:

.ui-datepicker {
    display: none;
    padding-bottom: 0;
    padding-left: 0.2em;
    padding-right: 0.2em;
    padding-top: 0.2em;
    width: 17em;
}

but this line:
display:none
is strike-through. why this happen? How can I fix this?

Thanks.

Answer 1

Since CSS cascades, you must have some other instruction in your CSS that targets that DIV and is telling it that it must be displayed. Firebug will be able to tell you exactly which rule is overriding it, have a look

You should read this article on CSS specificity : http://htmldog.com/guides/cssadvanced/specificity/

EDIT

Example of how Firebug shows overridden classes. The ones that are not struck through is the active class : Here’s the high quality image : https://i.stack.imgur.com/kJoQv.jpg