CODEWITHSUNDEEP
htmlcssjquery-ui
Ricky
Ricky

Reputation: 77

CSS overriding CSS and jQuery UI

So I have a regular CSS/HTML website for my upcoming book. It has a section called Bonus Features for extra articles that I’ve written. They pop up using jQuery UI that reads from external HTML pages.

Because I want the titles and dates… i.e.

Hello World

May 6, 2011

…to be very close together, instead of your usual gap, I’ve created a separate CSS stylesheet (dialog.css).

body {
    font-family: Arial, Verdana, Helvetica, sans-serif;
    font-size: 12px;
}

h1 {
    font-weight: bold;
    margin: 0;
}

h1 + p {
    margin: 0;
}

h2 {
    margin: 0;
}

h2 + p {
    margin: 0;
}

p {
    font-size: 14px;
    line-height: 18px;
    margin-bottom: 10px;
    margin-top: 0px;
}

Unfortunately, dialog.css seems to be overriding default.css (for the website) because whenever I open then close the pop-up, the text on the Bonus Features page clutters together, reading from dialog.css, until a browser refresh.

Is there a way to prevent this from happening, like a special HTML or CSS code?

Thanks.

Upvotes: 0

Views: 1005

Answers (3)

seler
seler

Reputation: 9193

use firebug (or something similar) to find out how this property is set. to override this rule you need to use the same exact selectors or more powerful. thats the way CSS works and thats where the name came from.

also you may try adding !important after each rule.

Upvotes: 0

bpeterson76
bpeterson76

Reputation: 12870

Sometimes, it can be as simple as minding the order that the css loads. The last one in order defined will generally take precedence. Yes, there are exceptions, but as a rule of thumb, put your most customized CSS file at the end of a series of CSS declarations, while loading things like jQuery UI's css first.

Upvotes: 0

jrn.ak
jrn.ak

Reputation: 36619

It sounds like dialog.css is being loaded in the main page's scope.

if your dialog is built like this:

<div id="dialog">
    <!-- content -->
</div>

then you can make your css like this:

#dialog h1 {
    font-weight: bold;
    margin: 0;
}

and those properties will only apply to elements within an element of id #dialog

Upvotes: 1

Related Questions