CSS and sites with multiple conflicting style sheets.

September 7, 2005 2:43 PM

CSS question: I'm responsible for adding a university-wide banner to an existing organization website. It involves merging the banner and its style sheet with an existing site - which has its own, very different style sheet.

The banner is provided by the school, who gives a HTML file with several CSS style sheets (one main one, the other two to address the idiocynicies of IE on Macs and PCs).

The problem is - when I include the HTML/CSS code for the university banner onto the new page - its style sheet totally destroys the formatting of the site, as there are numerous conflicts with various elements between the original sheet.

How could I limit the effect of the first university, required stylesheet to just the banner, while the rest of the page uses the original stylesheet? I am required to use the university banner and associated code - its part of a new standardization effort across the university

posted by jare2003 to computers & internet (3 comments total)

Whack <div id="whatever"></div> around the stuff you're pasting in. Then prefix every CSS selector for it with #whatever. Those selectors will only apply to stuff within the div.
posted by cillit bang at 2:55 PM on September 7, 2005

I agree with cillit. You might want to read up on CSS selectors.
posted by adamrice at 3:10 PM on September 7, 2005

Sounds like whoever produced the banner doesn't quite know what they're doing. Unless you're doing something daft with a site, it's up to the banner to stay out of the way by carefully using descendant selectors and defining a large number of properties (so that its formatting isn't affected by the page in some way).

It's inefficient that they're using multiple style sheets just for a banner, no need to slow everything down by doing that.

The banner should also, in my view, be inserted at the foot of the page to avoid damaging the accessibility and SEO of the sites. It can be displayed at the top using absolute positioning (might need an empty div at the start of the page to reliably clear space for it).

I've had the same problems myself in the past, it's a real pain when you have to mess up a site with countless hacks to work around someone else's iffy work. All you can do is make sure your style sheet overrides theirs when styling the rest of the page (e.g. maybe wrap the rest of the page in something and target it specifically with the CSS rather than fighting over the whole page).
posted by malevolent at 11:13 PM on September 7, 2005