BleepingComputer.com: Help! My skin selector won't work right.

Hello,

I had this code working perfectly, and then something changed and the calls in the first two divs below will not do anything. Can anyone see why? The calls look identical in all four divs to me, why won't the first two work anymore?

<div class="Peach" onmouseover="previewStyle('peach.css');" onclick="setCookie('Style','rayslinks.css',365);">Black on Peach</div>
<div class="Blue" onmouseover="previewStyle('blue.css');" onclick="setCookie('Style','rayslinksblue.css',365);">White on Blue</div>
<div class="Black" onmouseover="previewStyle('black.css');" onclick="setCookie('Style','black.css',365);">White on Black</div>
<div class="White" onmouseover="previewStyle('white.css');" onclick="setCookie('Style','white.css',365);">Black on White</div>

Here is the previewStyle function:

function previewStyle(StyleFile)
{
     document.getElementById("Skin").href= StyleFile;
}

I keep looking at it, and I can't spot any differences... Neither the onmouseover or the onclick routines are firing in the first two divs, but in the second pair they do????

Later, Ray Parrish

Check the .css files for syntax errors. I wouldn't think that it would prevent the divs from firing, but it is all that I can think of.

Are you using Firefox by any chance? Firefox has some nice plugins that can help debug html, javascript, and css. Look for the 'Web Devloper's Toolbar, or 'FireBug'. I use the first one almost exclusively, but I am warming up to FireBug also.

OK! My friend in Texas accidentally discovered for me that if one changes to the larger text sizes, all of the skin selection areas start working!

I had only changed to the smaller text sizes a couple times when coding and testing, and did most of the testing with a larger text size selected so I didn't notice it wouldn't work right on smaller text sizes.

Now, the question is Why?, and how do I fix it?

I've posted the skin selector to my web site, but not linked to it from any of the pages yet. If someone wants to give it a try and look at the source it it here Change Skins

Here is the section of the style sheets that specifies the styles for the style selection divs, [I call them buttons, but they're not]

div.SkinPanel {
       border: solid;
       border-color: black;
       height: auto;
       width: 155px;
       float: left;
}
div.instruct {
       height: auto;
       width: 150px;
       padding-left: 5px;
}
div.Peach {
        background-color: PeachPuff;
        color: black;
        border: solid;
        height: auto;
        width: 150px;
        text-align: center;
        border-color: black;
}
div.Blue {
        background-color: blue;
        color: white;
        border: solid;
        height: auto;
        width: 150px;
        text-align: center;
        border-color: black;
}
div.Black {
        background-color: black;
        color: white;
        border: solid;
        height: auto;
        width: 150px;
        text-align: center;
        border-color: black;
}
div.White {
        background-color: white;
        border-color: black;
        color: black;
        border: solid;
        height: auto;
        width: 150px;
        text-align: center;
}
div.textsize {
        border: solid;
        border-color: black;
        height: auto;
        width: 150px;
        text-align: center;
}

SkinPanel is a container and holds all of the other ones specified in that section.

Looking at these settings, I note that I have height set to auto for these areas so they change size with the text sizes. At the smaller sizes the code breaks... Hmmmm....why!!!

Edit Note: I'm also noticing that the text selector divs work no matter the text size. The only difference with them is there are on onclick() events in them.

Anyone got a guess at how to fix this?

This post has been edited by Ray Parrish: 15 November 2008 - 06:29 PM

groovicus, on Nov 15 2008, 01:27 PM, said:

Yes, I'm using Web Developer already with Firefox. See my new post, I've discovered that the size of the selection areas matters for some reason.

I'm going to validate those style sheets right away just to be safe as I haven't yet.

Later, Ray Parrish

OK, now I'm more confused, the page works different on the web. When I change it to the blue skin and refresh the page the page loads incorrectly, with no borders around anything, and when I move my mouse over the page it changes back to the default peach skin. . It doesn't do that on my local drive.

The other styles are loading ok.

I've validated the CSS with Web Developer and it passes all of them. OOPS! It was only validating one sheet, once I changed the document head to point at all four of them the validator caught some errors which are now fixed except for the one that said PeachPuff is not a valid color value, hey, I got that color value off the W3C color names page!

Go figure...

Edit: more info
Well, I put a links to all of the alternate style sheets in the Change Skin file and the web version works much better now, plus it gets rid of the lag of loading the style sheet on refreshes.

I have to go to the second largest text size to get it to work, on the next size down, only the bottom two color buttons work.

Later, Ray Parrish

This post has been edited by Ray Parrish: 15 November 2008 - 06:33 PM

OK, now my web site appears to be down. Always something! Time to call tech support.

Later, Ray Parrish

Edit: Tech support at 1 & 1 says it will be back up in a few minutes..

This post has been edited by Ray Parrish: 15 November 2008 - 06:10 PM

I'll take a look tomorrow.I don't see anything right off. I think I know what is happening, but I am not going to confuse you just yet until I know for sure.

groovicus, on Nov 15 2008, 06:18 PM, said:

Thanks... I was thinking of a couple of kludges, but haven't come up with an elegant solution yet.

Kludge one: set the font sizes in the style divs class descriptions to a set size large enough that they always work, but I really want them to change size with the rest of the fonts on the page.

Kludge two: set the height attributes to the style selection divs to a certain number of pixels, but then they will always stay the same size and won't look good with the tiny fonts.

Meanwhile I'm reading about the Button html element at W3C, and thinking of trying another page with buttons instead of divs... 8-)

Later, Ray Parrish

Hello again,

Well groovicus hasn't got back to me, but I now know what's going on. It isn't the size of the divs that matter, it's that the div called content to the right of the style selection panel is overlapping the style selections and masking them. If one mouses over the far left portion of the buttons they work.

I found this out by using the Web Developer tool bar to "display element information", which outlines each element as you mouse over them.

Now I have to figure out how to get that div to stick to it's own space on the right.

Later, Ray Parrish

This post has been edited by Ray Parrish: 16 November 2008 - 08:15 PM

Hello again,

Well, no matter what I do the content div still overlaps and hides the buttons! I even tried z-order on it and it still obscures the buttons. If I set the position of it to relative and move it over 170px, then the content in it also moves over to the left within it, and leaves a big empty space on the left of it, and then it overlaps the adblock on the right.

How do I get the div content to respect the other elements around it? Why does all of it's content move to the right within it when I set it to relative? It's like I also set padding-left to 170px,the damn content won't line up with the left border of the content div.

Anybody know how to fix this?

Later, Ray Parrish

Never mind, I just found the answer at W3C schools... you have to set margin-left instead of using position relative.

Later, Ray Parrish

Sorry, been a busy day. It sounds like you got it sorted though.

groovicus, on Nov 16 2008, 07:07 PM, said:

Yes! Hooray! It works now, and I've uploaded the code to my web server so everyone can give it a try now.

I never suspected that one element of the page could be hiding another... Good thing I have the Web Developer plug in for Firefox. and all Hail the W3C for having such a good information resource!

Later, Ray Parrish

Hello again,

Well, I thought it was working until a friend told me it wouldn't work in Internet Explorer so I had to reboot into Windows and work on the site for most of the day. Luckily I found a page by a very smart young man that explained how to get Internet Explorer to use alternate style sheets.

It turns out you have to specify all but one of them as "alternate stylesheet" in the rel= setting, and give them a title attribute, then have one style sheet only that is of the "preferred" type, [to make it preferred you just give it only a title attribute] You can also specify a persistent style sheet which will always be applied no matter which other sheets you load on top of it.[this one has no title attribute] Only after these requirements have been met will IE allow switching between style sheets.

I still have one small bug. For some reason in Internet Explorer my front page will not use the same text size as the other pages on my site. I've tried everything I can think of and still it insists on using a different size when I set one of the larger font sizes. It works great in Firefox.

Oh well, the rest of it is working, and I'm not going to spend much more time on trying to get the front page to use the same text size as I've run out of ideas.

Here's a link to the young man's page that showed me how to get IE to load styles sheets with Javascript.

Alternative Style: Working With Alternate Style Sheets

Later, Ray Parrish