PDA

View Full Version : Style Sheet Switcher Mystery



Anvil
03-25-2007, 05:54 AM
1) Script Title: Style Sheet Switcher

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex9/stylesheetswitcher.htm

3) Describe problem: I have used the style sheet switcher for well more than a year on one of my sites. Now, I am trying to implement it on a new site (a Nucleus CMS blog), and I am encountering the strangest problem: every time I put the style sheet script call in (right where it's supposed to go, and right where it works just fine on my other site), it makes the header class for all three of the style sheets stop being recognized. (I use a .header declaration to create a theme-appropriate background image at the top of the Website.)

As soon as I put that <script ...> in there, though, the header just stops being seen, even though the script works perfectly to switch among three themes. The header class looks like this:

.header {
margin-top: 10px;
width: 100%;
height: 180px;
margin-bottom: 2px;
align:center;
background: #000 url(http://dark-wraith.com/images/dwfblk2.png) no-repeat center center;
}

although I can't for the life of me see why that script would frustrate this header, especially since I use a very similar declaration on the site where this beautiful style sheet switcher script has worked like a clock for so long. Just as soon as I take that script out, the header's right back where it's supposed to be again, no matter which one of the three cs sheets I pull.

(This whole problem is happening in IE6/IE7, and in Firefox 2.0.3, so it's not a browser issue.)

Do you have any idea of what's going on? I must have combed that css several dozen times looking for some kind of error that might account for this, but so far, I've come up bupkis. I've put the script everywhere of which I can think, and I've put the theme selector out in the open as well as in an include (which is where it is now), and I've even left the theme chooser out entirely to see if that was what was causing the header class to be ignored.

I got nothing.

Considering how much time I put into building this site and the three parallel sheets, I am just hating the idea of giving up on the theme choices my regular visitors have come to expect.

The site where this is happening, by the way, is

http://dark-wraith.com/darkwraith2/

and I'm leaving the site with the missing header tonight in case you want to have a look to see if you can tell what's happening.

I am most grateful for any help you can provide.

jscheuer1
03-25-2007, 03:37 PM
Here is a portion of your source code as served to the browser:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<title>The Dark Wraith Forums</title>
<meta name="description" content="Economics Finance Politics Education Knowledge" />
<link rel="bookmark" title="Nucleus" href="http://nucleuscms.org/" />
<link rel="archives" title="Archives" href="index.php?archivelist=1" />
<link rel="top" title="Today" href="index.php?blogid=1" />
<link rel="alternate" type="application/rss+xml" title="RSS" href="xml-rss2.php" />
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="rsd.php" />

<head>
<link rel="stylesheet" type="text/css" href="http://dark-wraith.com/nudn2.css" />
<link rel="alternate stylesheet" type="text/css" media="screen" title="ice" href="http://dark-wraith.com/nudn2b.css" />
<link rel="alternate stylesheet" type="text/css" media="screen" title="ashfire" href="http://dark-wraith.com/nudn2c.css" />
<script src="http://www.dark-wraith.com/scripts/styleswitch.js" type="text/javascript">

/***********************************************
* Style Sheet Switcher v1.0- Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
***********************************************/

</script>

<!-- favorite icon -->
<link rel="shortcut icon" href="http://dark-wraith.com/darkwraith2/skins/nudn2/favico1.ico" />
<link rel="icon" href="http://dark-wraith.com/darkwraith2/skins/nudn2/favico1.ico" />

</head>


The red opening head tag belongs right before the:


<title>The Dark Wraith Forums</title>

tag. This may not be the only problem but needs to be resolved first.

Anvil
03-25-2007, 05:29 PM
Good afternoon, John. Thank you for responding.

Yes, that was quite a sloppy mistake, there. I had been moving that script around and somehow managed to get the <head> below where it should have been.

Unfortunately, the problem is still there with the backgrounds that won't display. (Even the right-click menu doesn't offer the "Save background" option.)

I do notice, however, that the class is being recognized: that big space at the top is the 180px height declared in the .header, which means it's not the class, per se, but only the background image.

I've noticed something else that I missed last night: some backgrounds are displaying just fine (notice all the little graphic files in the right sidebar), but several graphics (all those in the main column, perhaps coincidentally) are not present. The large (1010x169) background header at the top is not displaying; a tiny arrowhead graphic attending each post's information footer is not displaying; and a long, thin spear graphic to separate posts is absent.

But here's the really strange thing: if I change the class .header to one of the classes whose graphic is displaying, that graphic will show up! But if I change that class's background graphic to one of the ones that doesn't show, once again there's no graphical background displayed. All of these graphics are identical in terms of being .png files at 256 colors with transparency set to the background set in the style sheet; one of the graphics not displaying is very large (56K, I think), one is moderate in size, and the third is very small.

As always, I am grateful for any information you can provide to help me resolve this problem so I can announce this site to my readers.

jscheuer1
03-25-2007, 06:06 PM
In your stylesheet:


.header {
margin-top: 10px;
width: auto;
height: 180px;
margin-bottom: 2px;
align:center;
background:#000;
background-image:url(dwfblk2.png);
background-repeat: no-repeat;
background-position: center center;
}

Actual path to image:

/images/dwfblk2.png

Use:


.header {
margin-top: 10px;
width: auto;
height: 180px;
margin-bottom: 2px;
align:center;
background:#000;
background-image:url('/images/dwfblk2.png');
background-repeat: no-repeat;
background-position: center center;
}

I think that you may also have a zero byte file called dwfblk2.png in the root of the domain, further complicating matters at least in so far as looking for the actual image goes. For whatever reason, a zero byte file by that name appears to be there in the root.

Anvil
03-25-2007, 06:51 PM
Good morning, John.

While you were writing that, I was discovering almost (not exactly, but almost) what you were noticing. The problem is that the mystery is solved, but I'm about as confounded by the solution as I was by the problem.

Some of the URLs I was setting in those background statements were of the form, for example,

http://dark-wraith.com/images/dwfblk.png

The browsers, on the other hand, think that now means to go looking for those files in the root directory, dark-wraith.com, not in the images directory, and certainly not in the directory in which the CSS and index files for this site are located (about five layers deep).

Some URLs I was providing were of the form

pics/commentpoint.png

and the browsers were looking for those in

http://dark-wraith.com/pics,

not in the directory in which the CSS and the index pages are located.

It's like calls for graphics in the main column are now going to be sought by browsers in absolute reference to the root directory of the domain, regardless of how specific I get in casting the URL in the background statement.

Strangely enough, this is fine because I am just about to move the entire directory structure for this site up to the root directory so it becomes the main Website of the domain.

Anyway, I am very happy, now.

And you, John, are most definitely the man.

Be well.

Anvil
03-26-2007, 05:20 AM
Just to close this thread on an upbeat note, I have now migrated the test site to the root directory so it is now the official Website of the domain, complete with three color themes from which visitors can choose.

The URL is http://dark-wraith.com

I'm still doing a little wrangling with the three-column layout (different monitors using the same resolution are displaying slightly different results, some of which aren't quite desirable). I'll make it past that, but the style sheet switcher is most decidedly working beautifully, just as it did on the old site.

Again, thank you.