CSS Bleeding over to new page

how can i stop css from carrying over

[jawschnick]

Hello,

I've set up a mobile business directory, and structured it as such:

Domain -> State -> City -> Category -> Listing
the domain main and state pages have the same css, maroon bars and whatnot, where as the city, category, and listing have black bars and such.

When i start from the domain and go through to the listing, the maroon css from the root carrys over all the way through. and if i start off at a listing, and go back to the hub using my links, it makes the main page all black.....

Any suggestions? The way i got around it was to redirect each site to a different domain, then use a meta refresh tag and shoot it right back over, which resets the css for each page.

I'm looking at hundreds if not thousands of listings, so having to redirect every one of those would be rather cumbersome.

Any suggestions?

[Marshall]

Welcome to WebmasterWorld jawschnick.

Can you provide a snippet of the relevant CSS code? Without it, no one here can really offer you much advice as it would only be a guessing game.

Marshall

[lucy24]

What we may really need is the site structure. CSS doesn't "carry over"; each separate page has to specify the style sheets it uses.

Do the pages use relative links or site-absolute links to call those style sheets? If you've got any combination of rewrites and relative links, then mixed-up CSS may end up being the least of your problems. Same if you're using dynamic pages where the same header code is recycled for different directories, especially for different directory levels.

[jawschnick]

Not sure what snippet to post here.
The only issue is that there is 1 main folder with 3 sub folders, and the index files and such in the sub folders are using the main folders .css file, while they all have their own.

?

[jawschnick]

Yeah 4 levels of folders, and each one has a style1.css file in it. Would renaming the css files for each specific directory help?

[jawschnick]

Site structure:



Root(1custom.css)
to
States(another 1custom.css)
to
Cities(yet another 1custom.css)
to
Businesses, 1custom.css universal styling on all the business pages.

I tried renaming the css files, but it still does it....

Thanks everyone!

[Marshall]

Yeah 4 levels of folders, and each one has a style1.css file in it. Would renaming the css files for each specific directory help?

Are they duplicate style sheets or are there differences? As Lucy pointed out, your file structure could be a problem, especially if there are some variations between the style sheets. A page may have the linked style sheet at style1.css when it maybe should be ../style1.css.

One solution is to make one main style sheet and do either
<link rel="stylesheet" type="text/css" href="/main.css" />
or
<link rel="stylesheet" type="text/css" href="http://www.YOURDOMAIN.com/main.css" />

Another option is have one style sheet for all the "general" styling and specific ones for everything else, e.g.
listing.css
category.css
city.css
state.css

And assign them to their relevant pages, but again watching their link path.

Unless you have different style sheets for different media, having multiple sheets, especially with the same name, can be difficult to manage.

Marshall

[jawschnick]

hmmm thats a new idea... trying it now.. I'll report when done! :)

Thanks again!

[jawschnick]

Didnt work :(

[alt131]

Hi jawschnick and welcome to WebmasterWorld :)

I wonder if useful to step back and look at the bigger picture a bit. Redirects should not be required and are really the wrong tool for this issue, so the first question I'd ask is whether you need different css files. Unless there are a lots of differences, just set a class or id for the elements to be styled differently and use the same css file. If you have already tried that and the styles are not being applied, that suggests an issue with the css or html (have you validated), or an issue with specificity of the selectors.

Can you provide a bit more information than "didn't work" - I wonder if there is a cache issue - so the browser is not checking for the new files, or a path issue to the css.