I have ran into the issue of conflicting CSS styling a few times now and would like to know if there is any way other than an iframe to isolate the css styling to one area of the web page without that css affecting other areas of the page.

For example you have a html & css code provided by a third party for a search or sale box to be embedded into your webpage but their css conflicts with your pages css. You could use an iframe but the search box has drop down menus that would be cut off after the iframe area, etc. etc.

Is there any way to build a designated area of the page which keeps the CSS in that area separate from all other areas of the page, i.e. your main pages stylesheet?

Rename the conflicting items either yours or theirs.

Unfortunately, thats not an option, Im talking about large websites with multiple style sheets and thousands of characters of CSS.

use an iframe.

I suppose the only thing I can think of is creating an id for that section, and changing the CSS slightly so that it only applies to that DIV.

Using your search box example:

<div id="searchbox">
Other divs here
</div>

and in the stylesheet:

#searchbox .theirclass {
stuff
}

or are you linking to their stylesheet, and can't change it? Might have misunderstood...

Originally Posted by chrishirst

use an iframe.

Well an iframe would be optimal, but like I said if you have a drop down menu such as on a form, then that info gets cut off at the edges of the iframe, and other issues such as this occur in certain instances.

Sounds like the consensus is there is no way to do something similar to an iframe; guess I'll just have to spend hours tinkering with the CSS and renaming in these situations.. Thanks for the replies though

Originally Posted by Gilligan

I suppose the only thing I can think of is creating an id for that section, and changing the CSS slightly so that it only applies to that DIV.

Using your search box example:

<div id="searchbox">
Other divs here
</div>

and in the stylesheet:

#searchbox .theirclass {
stuff
}

or are you linking to their stylesheet, and can't change it? Might have misunderstood...

No, I am taking posession of the stylesheet, its just for this example I have 4 stylesheets and tons of code that is conflicting, so just wondering if there was a simple solution like an iframe, but sounds like no. I will just have to rework a lot of code

i think placing others stylesheet on top of ur stylesheet might help unless 'important' is not used in any of the previous stylesheets