CSS overriding CSS and jQuery UI

Question

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.

jrn.ak · Accepted Answer · 2011-05-06 21:23:49Z

1

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

answered May 6, 2011 at 21:23

jrn.ak

36.8k7 gold badges37 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Ricky Over a year ago

Thanks. Where do I put the div id thingy though? The template? If so, where? Sorry, I'm a beginner.

jrn.ak Over a year ago

@Ricky: That depends on how the popup is created. I'm not familiar with jQuery UI, so I don't know how to proceed.

Ricky Over a year ago

I figured it out. Thank you for all your help! (:

bpeterson76 · Accepted Answer · 2011-05-06 21:53:18Z

0

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.

answered May 6, 2011 at 21:53

bpeterson76

12.9k6 gold badges51 silver badges82 bronze badges

1 Comment

Ricky Over a year ago

It's okay. I figured it out. Thanks so much for your suggestion. (:

seler · Accepted Answer · 2011-05-06 22:21:21Z

0

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.

answered May 6, 2011 at 22:21

seler

9,2334 gold badges43 silver badges55 bronze badges

1 Comment

Ricky Over a year ago

It's okay. I figured it out. Thanks so much for your suggestion. (:

Collectives™ on Stack Overflow

CSS overriding CSS and jQuery UI

3 Answers 3

3 Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related