/    Sign up×
Community /Pin to ProfileBookmark

alternate stylesheets

Copy linkTweet thisAlerts:
Aug 28.2006

I’ve been playing around with alternate stylesheets, with minor luck. I’ve implemented the switching mechanism with cookies, as described online at several places, but it seems a bit wacky.

More specifically, it looks like remnants of the old stylesheet may remain, when the JavaScript loads the new one. Can anyone tell me, do I need to somehow replicate all styles, tags, etc in each of the stylesheets, such that an attribute (e.g. “border:5px”) that exists in one, MUST exist in the alternate sheet? If “border” is not in the alternate sheet, I’m thinking it’s being set to 5px, even though I might expect the default value of 0px?

Thanks for any tips. The site I’m fiddling with is at [url]http://www.borzoi.org/indexs.html[/url] though I don’t really have a specific bug to point at.

Dave

to post a comment
CSS

8 Comments(s) ↴

Copy linkTweet thisAlerts:
@KDLAAug 28.2006 — I'd guess that do need to negate any styles which may carry over to the page, once a new stylesheet is chosen. The stylesheets are cached, just like images; and the page could be pulling from both: the cached "old" version and the new one.

KDLA
Copy linkTweet thisAlerts:
@tracknutauthorAug 29.2006 — Thanks, I'm thinking that's what's going on. It makes coding up multiple stylesheets quite annoying, it seems...

Dave
Copy linkTweet thisAlerts:
@KravvitzAug 29.2006 — If one stylesheet is disabled via the script none of the style rules in it should affect the document.

Which browser(s) are you testing in?

Could you give us a specific example of a style from the default stylesheet that is not overridden via the PDA stylesheet but appears after the stylesheets have been switched?
Copy linkTweet thisAlerts:
@ray326Aug 29.2006 — If you embed them using server-side includes I believe you'd sidestep the caching. At any rate, here are some articles at ALA about stylesheet switching.

http://search.atomz.com/search/?sp-q=style+switch&x=0&y=0&sp-a=sp1002d27b&sp-f=ISO-8859-1&sp-p=All&sp-k=All
Copy linkTweet thisAlerts:
@tracknutauthorAug 29.2006 — If one stylesheet is disabled via the script none of the style rules in it should affect the document.

Which browser(s) are you testing in?[/QUOTE]
Both IE and FF act the same.

Could you give us a specific example of a style from the default stylesheet that is not overridden via the PDA stylesheet but appears after the stylesheets have been switched?[/QUOTE]
I'm still fairly confused on this, but do this and I think you'll get an idea (my apologies for the bulk, I presume I probably should trim this way down to some test site which is much simpler, rather than trying to deal with it as the whole site. Anyway, here's the experiment:

Go to http://www.borzoi.org/indexs.html

-presumably it'll come up with the default style sheet, note how the nav bar has hover & visited attributes

Click on "PDA style" and it should switch the nav bar to blue boxes along the top of the window. This nav bar has no hover or visited attributes, and looks fine on the main page

Click on the link labeled "Page 2"

- note the nav bar is all wacky - it now has the hover and visited attributes that come from the default style, but the PDA style seems to still be alive (which it should be, if my code is right).

That's the symptom, kind of hard to diagnose with all my code in there. The style sheets are at http://www.borzoi.org/site/style.css and PDAstyle.css

THanks

Dave
Copy linkTweet thisAlerts:
@KravvitzAug 29.2006 — The two different pages are using different JavaScript files. I suspect the problem lies there.
Copy linkTweet thisAlerts:
@tracknutauthorAug 29.2006 — The two different pages are using different JavaScript files. I suspect the problem lies there.[/QUOTE]

Holy cow, you're right, and it looks like that was the problem! Thank you, thank you, thank you!

Dave
Copy linkTweet thisAlerts:
@KravvitzAug 29.2006 — You're welcome. ?

P.S. Don't forget to validate the XHTML in that second page.
×

Success!

Help @tracknut spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.2,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...