CSS problems with AJAX

drag0n

Hi:

Although this isnt a php problem; I really need help and google doesnt work for this specific question. Thanks for understanding.
I am calling pages with AJAX and displaying them in a single div container on one page.
The problem right now is that the CSS from the pages being called with AJAX keeps mixing into the main parent page.
How can I separate the two pages css? Right now the page I call with ajax has a custom table css tag... and the css ends up applying to ALL table tags... including the ones on the parent page. How can I keep the css to only that page itself or somehow keep the tables on the parent page from being affected?

Thanks

TeraTask

If you're fetching content from the server for displaying in a div, it should not be fetching anything but the content to be shown. Take out the other stuff and mix it with the original stylesheet and scripts. Then, use ids with CSS selectors to style the page.

For example, let's say you have 3 pages:

1) Home page
2) About Us
3) FAQ

Now, the homepage loads first and it's content is already in your div whose content changes. Let's name that div <div id="changeable_content">. Inside of that div, wrap the homepage content with another div, say <div id="homepage_content">. Then, when the users chooses the About Us page, have it's content inside of changeable_content be wrapped with a div, say <div id="about_us_content">. Same deal for FAQ: <div id="faq_content">. Now, you can adjust your CSS to apply only to children of the respective id.

Hope that helps.

nrg_alpha

This very much depends on your CSS code.. As Tera mensions, you can assign CSS clases or Id's to make certain elements effected while others are not.

I personally would have separate external .css stylesheets for different pages (making sure there is no class or id or tag rules that clash. So I for instance use a master stylesheet on my site (which controls all the css needed for the GUI and standard font size, types, etc..

Then a separate .css file for each page.. this .css file controls the presentation of content within the page. So long as you make sure the main / master .css file does not contain any rules that can conflict with another stylesheet, you should be good to go.

Cheers,

NRG

leatherback

table.affect_me
{
border-color: #ffeedd;
}

drag0n

Thanks for all the replies.
I decided to use the classes method.
however; in my css file; i have alot of properties; such as "table a:hover","tbody tr td","tbody tr:hover td".
How do i add the .grey to those? Or is there a way to make an entire .css file specific to a class name?
Also; if I add the .name parameter to all the properties on the css file; does that mean I have to add <class => to all the tags such as <td> etc?
There must be a easier way right?
Or is it possible to make the table which I do not want being affected just not follow any css rules? For it just to follow the html rules "border=0" etc...?

thanks