Importing style sheet isn't working (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets



Message

womble -> Importing style sheet isn't working (6/20/2005 12:51:28)

I'm having a bit of a problem (well large problem banging head against monitor all afternoon actually [:@]) trying to import a stylesheet into another stylesheet.

I'm working on setting up a style sheet switcher to allow users to change the text size and background colour of my site. There's a separate stylesheet for each option, each of which imports the default sheet and has either 1 or 2 additional rules, depending whether it's just font size that needs changing, or background as well, e.g.

@import (url default.css);

/*stylesheet for the medium text size version of the site*/

body, div, p {
background-color: Pink !important;
font-size: large !important;
}

I've got the js set up, but the stylesheets aren't playing nicely. I'm working in TopStyle Pro, and all appears to be working well in the preview pane, but when I try to preview in any of the browsers, suddenly the default styling seems to disappear. I've got the import directive right at the top of the css. The only thing I could think is that using the "!important" declaration was somehow messing it up (those were put in because it was the only way I could find to get the background colour to go everywhere and not just highlight the text and affect all the text sizes), but it doesn't work with that taken out either.

I've only tried it on one page at the moment (didn't want to mess them all up!). The page is no-where near functional yet (links don't go anywhere at the moment), but it's here. For some reason the page by default seems to have picked up the text size and background (which it wasn't doing half an hour ago and I haven't done anything to the code since then). Clicking the 'default text' takes it back to how the page should look by default. Clicking the 'larger text' link removes all the formatting. The 'largest text' link removes all the positioning etc. but adds in a pink background - on this trial page both the 'larger text' and 'largest text' links should change the font size and change the background colour, so I seem to have unintentionally developed a random css switcher - not the effect I was intending! (oh, and BTW, any ideas as to why IE6 puts in two little boxes above the text nav at the foot of the page?)

I've been playing around with this all afternoon and between this and the heat (80°+), my brain's well and truly fried now!

Any ideas anyone?

Thanks,

Womble (melting!)



caz -> RE: Importing style sheet isn't working (6/20/2005 18:37:40)

Well hey, one doesn't want to bang on about doc-types and validation but...

line 13 column 1 - Warning: <link> element not empty or not closed
line 14 column 1 - Warning: <link> element not empty or not closed
line 15 column 1 - Warning: <link> element not empty or not closed
line 94 column 273 - Warning: unescaped & which should be written as &
line 13 column 1 - Warning: <link> inserting "type" attribute
line 14 column 1 - Warning: <link> inserting "type" attribute
line 15 column 1 - Warning: <link> inserting "type" attribute
line 16 column 1 - Warning: <script> inserting "type" attribute
line 44 column 2 - Warning: trimming empty <div>
Info: Doctype given is "-//W3C//DTD XHTML 1.0 Strict//EN"
Info: Document content looks like XHTML 1.0 Transitional
9 warnings, 0 errors were found!


HTML Tidy(ied) 

<!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">
<head>
..
<style type="text/css" media="screen">
/*<![CDATA[*/
@import url (default.css);
/*]]>*/
</style>
<link rel="stylesheet" href="mediumFont.css" type="text/css" />
<link rel="stylesheet" href="largeFont.css" type="text/css" />
<link rel="stylesheet" href="default.css" type="text/css" />
<script language="JavaScript" type="text/javascript">
//<![CDATA[
<!--
var doAlerts=false;
function changeSheets(whichSheet){
  whichSheet=whichSheet-1;
  if(document.styleSheets){
    var c = document.styleSheets.length;
    if (doAlerts) alert('Change to Style '+(whichSheet+1));
    for(var i=0;i<c;i++){
      if(i!=whichSheet){
        document.styleSheets.disabled=true;
      }else{
        document.styleSheets.disabled=false;
      }
    }
  }
}
//-->
//]]>
</script><!--NOTE TO SELF: NEED TO EDIT THE META TAGS ETC-->

</head>



You also have a spare unused div -
<h2 id="subhead">Information, support and training for Deaf, deaf, deafened, hard of hearing and deafblind people</h2>
<div></div>
<div id="header">

The code is not actually calling the stylesheets, but I guess that the browsers are guessing[;)] Gotta love the Web Dev extension in Firefox.
Much fresher in the Northwest today, have been like a wet lettuce for days now I feel that I can tackle the wilderness that used to be my back garden.
Cheers,
Carol

PS. If a mod can deal with this italicisation, I'd be grateful.

Done.



womble -> RE: Importing style sheet isn't working (6/21/2005 6:33:26)

Thanks for that Carol, and thanks also for pointing out the extra <div>. That was me being lazy. I was having problems yesterday with the top of the tabs overlapping the sub-heading when the text re-sized and via the FF developers toolbar worked out where the problem was, but rather than correcting it properly I put an extra <div> in with an en space in to create more space, then changed my mind later but forgot to take out the empty <div>.

I was religiously re-validating every time I made changes, but I got so flustered with it and the heat yesterday I must have forgot. Fortunately it's cooler here today too. Anyway, all is validating now, but I was still having problems getting the stylesheets to load. Then I realised I hadn’t validated the CSS either, tried it, and realised that I’d got the import directives in wrong in both of the additional CSS files. I’d put:

@import (url default.css);

instead of:

@import url (default.css);

I’ve changed both of them, and all’s working now in IE, but they’re still losing the formatting in FF, NN and Mozilla. Opera’s completely ignoring them. Even with the changed import directives I can’t get them to validate, but I can’t work out why. The two files are:

/*stylesheet for the medium text size version of the site*/

@import url (default.css);

body, div, p {
font-size: large;
}

and:

/*stylesheet for the large text size version of the site*/

@import url (default.css);

body, div, p {
font-size: x-large;
}

The page is here.

It’s driving me crazy because it seems to be some sort of problem with the import directives, but I can’t work out what! Any suggestions appreciated.

Thanks,

Womble







c1sissy -> RE: Importing style sheet isn't working (6/21/2005 10:50:00)

quote:

the extra <div>.

Hi Womble, how are you today?

If you comment your divs as such 
<div id=wrapper><!--open wrapper div-->
content within div etc..
<!--close wrapper div><</div>


This helps tons when you are coding and have a lot of divs to take care of. It isn't an indicator of any type of laziness, I call it div confusion.[;)]



caz -> RE: Importing style sheet isn't working (6/21/2005 13:00:45)

It's been driving me crazy too [;)]

CSS validation

URI : http://www.ddeaf.org.uk/test/accessibility.html

* Line: 20

Parse Error - url (default.css);

You have a space after "url" should be url(default.css)

In default.css-

Typos such as Black,Maroon and White where it should be all lowercase.

Syntax like font-family: trebuchet ms, Verdana, Arial, sans-serif;
where it should be
font-family: "Trebuchet MS", in quotes.
There was also a margin declaration of 25%px.

I think that this could all be contributing to the problem - I can't help with the javascript though. I tried wrapping everything in a wrapper div to centre it on the page, but that didn't help.

It's being served as simple css for Netscape 4 and if it is the style switcher I can't help, sorry.




dpf -> RE: Importing style sheet isn't working (6/21/2005 13:23:53)

Ive been puzzling over this script:
quote:

<script type="text/javascript">
//<![CDATA[
<!--
var doAlerts=false;
function changeSheets(whichSheet){
whichSheet=whichSheet-1;
if(document.styleSheets){
var c = document.styleSheets.length;
if (doAlerts) alert('Change to Style '+(whichSheet+1));
for(var i=0;i<c;i++){
if(i!=whichSheet){
document.styleSheets.disabled=true;
}else{
document.styleSheets.disabled=false;
}
}
}
}
//-->
where is Kevin when we need him? the function changesheets is passed a variable called whichsheet but from where? what calls this function and passes the varaible? Kevin? somehow the whole script escapes me...



Tailslide -> RE: Importing style sheet isn't working (6/21/2005 13:56:54)

Womble

Are you particularly keen on this exact script or would you try another one - I've got Paul Sowden's script working (or at least I hope it's working) on my site with default, big text and high contrast stylesheets. Would you be interested in that one?




caz -> RE: Importing style sheet isn't working (6/21/2005 14:38:01)

To add to the above, If I do this,

<link rel="stylesheet" type="text/css" href="default.css" type="text/css" />
<link rel="alternate stylesheet" type="text/css" href="mediumFont.css" title="medium" />
<link rel="alternate stylesheet" type="text/css" href="largeFont.css" type="text/css" title="large" />

I can get them to display with the layout in Firefox.

I got help from here:-

http://www.alistapart.com/articles/alternate/

Which is where you'll get the script mentioned by Tailslide. Going to lie down in a darkened room now,
Cheers
Carol



caz -> RE: Importing style sheet isn't working (6/21/2005 14:41:34)

quote:

somehow the whole script escapes me...


I used to say something like that when being bullied to sing (I can't) in Dublin,

"I know the words, but the air escapes me..."
[:D]



womble -> RE: Importing style sheet isn't working (6/22/2005 5:34:52)

Well I'm glad it's not just me that it's driving crazy! [;)]

Thanks for pointing those out Carol. On the colours and fonts, I'm using TopStyle, so when you put 'font-family' or 'color' etc. it automatically brings up a drop down list to select from, to I just let it put it in without checking capitalisation etc. (should have learnt from FP experience not to just let it get on and do it's own thing!). I seem to remember I did get the default.css one to validate though, but I'll check it out again and see if correcting all the typos makes any difference.

As for the script, I'm now getting to the point where I'll try anything! I settled on that one because it was the only one I could get to work (well i didn't get any errors anyway). The others I tried kept throwing up errors and I don't know enough javascript to fathom out what was going wrong. My knowledge of js is basic and that seemed to be the simplest one, and I could sort of se the logic of how it was working. I do seem to remember looking at A List Apart, I don't think it was Paul Sowden's though. I'll take another look at it. (Jut had a peek at your site Tailslide and it is indeed working just fine).

I'm off to have a tinker with the typos etc. and see what happens. Back later...



womble -> RE: Importing style sheet isn't working (6/22/2005 7:05:09)

[:)] Good news! I've done the changes, corrected the typos, and I've now got it working in IE6, Firefox, Mozilla, and NN7.2 (haven't tried any older versions yet). Opera still isn't playing though. I'm also finding with all of them though that if I go through the different text sizes and then try to go back to default, in everything but IE, it goes back to the plain text no styling version. I was thinking that was maybe a problem in the javascript, but with it working okay in IE, I'm not sure.

<edit>Just discovered though if you refresh the page it then goes back to the styled version?????<edit>

Also discovered a nifty little tool in TopStyle Pro called 'Style Check' that actually goes through your CSS and identifies errors and warnings against the standards. That'll teach me to launch straight into software when I first get it without reading any of the instructions!!! It also brings up errors and warnings for individual browsers (which there are loads of!) For Opera it's saying it doesn't recognise the voice-family property, which I suspect is coming up because where I've used the box model hack, I forgot to put in the 'be nice to Opera rule'. I'll try putting that in and see if it makes any difference to Opera (I can but try).

The reason it's only coming up as plain text in NN4 is I think because I changed it slightly and used the @import declaration instead of a link in the html file.

At least I'm getting somewhere now!

<edit>Ooops! Getting more forgetful in my old age! This is the revised page.<edit>



c1sissy -> RE: Importing style sheet isn't working (6/22/2005 7:28:14)

Womble, if you ever get a few $$ to order the style master program, I highly suggest that you get this. Also go to their site, they usually have some tutorials going on over there, as well as being able to purchase their bundled course. They also have layout master, which I have as well, but have not yet figured out. I believe it only uses relative and absolute positioning. THey have trial downloads that are fully functional to try.
http://www.westciv.com/



womble -> RE: Importing style sheet isn't working (6/22/2005 7:32:15)

I'm back again! I've just discovered that by changing the @import directive in the html to a <link rel="stylesheet" etc., and adding a title to that as well, it seems to be behaving and going back to the styled default sheet okay - now just Opera to sort out! (and older browsers...(maybe I'll leave that for another day!) Here's the changed page.



caz -> RE: Importing style sheet isn't working (6/22/2005 12:15:19)

quote:

The reason it's only coming up as plain text in NN4 is I think because I changed it slightly and used the @import declaration instead of a link in the html file.


I thought that was what you wanted - to serve dear old NN4 with something that wouldn't make it sick, but that other browsers can handle.
Nice that you are finding the help in TopStyle... I use Stylemaster as c1sissy mentioned, it's geat for highlighting bad stuff.



womble -> RE: Importing style sheet isn't working (6/22/2005 12:41:02)

Erm, I really can't remember now! I've made so many changes over the last couple of days I can't remember why I did what now. Opera's still not playing, and it doesn't seem to be anything to do with the box model hack. Took all of them out and it made no difference. Actually, I've now left most of them out. When I read through it carefully, I didn't actually need most of them at all (I don't think anyway) - I'll probably work out tomorrow that I did after all! Anyway, my head's spinning now, so I think that's enough for today!



caz -> RE: Importing style sheet isn't working (6/22/2005 14:43:19)

Just an extra to this thread.

If you want to delve deeper into stylesheet switching - which I guess that neither you ,nor I want to do just yet, have a look at

http://www.howtocreate.co.uk/tutorials/index.php?tut=0&part=27

where you will find out about using javascript with the DOM for various browsers. The demo is really impressive and all the browser kinks are ironed out.



womble -> RE: Importing style sheet isn't working (6/23/2005 4:41:42)

Thanks for the link Carol. I'll keep a note of that for later use.
After sleeping on the Opera problem, though it pains me to say this, being a bit of a perfectionist and very stubborn, now I've got it working in everything else, I'm going to leave Opera for now. I'm going to be providing tips on manually resizing text in the different browsers anyway and the site itself works in Opera, just not the stylesheet switching. I'll probably come back to it though because I hate leaving something half done. Thanks for helping me get this far anyhow.



c1sissy -> RE: Importing style sheet isn't working (6/23/2005 6:49:54)

womble, another good trick, when you are having problems? is to copy all and create a page 2 etc... This way, if you have something working in one page, and change things, you know what you are doing. OR you could comment something out, with a comment added to your style rule where you wish to remove something to test it not being there or if it is interfering with what you are doing.

Sorry, not much help right now other then a few advice things as such (brother was on his cycle and someone ran a stop sign, I'm the spokes person for handling things, so it has been hectic past two weeks here[&o] and the past week, I have done nill with coding)



womble -> RE: Importing style sheet isn't working (6/23/2005 8:39:02)

Hi Deb,

Sorry things are so hectic for you. I'm working on a second copy of the page - didn't want to mess up the original. After getting it working in everything but Opera, I tried adding in another text size and it's broken again! [:@] (alternates between the 'large' and 'extra large' text sizes that won't work). I've validated the html, but the css validator is throwing up a couple of errors that appear to be something to do with the javascript:

URI : http://www.ddeaf.org.uk/test/largeFont.css
Line: 3
Uncaught error java.lang.Exception: Import loop detected in http://www.ddeaf.org.uk/test/default.css

URI : http://www.ddeaf.org.uk/test/exlargeFont.css
Line: 3
Uncaught error java.lang.Exception: Import loop detected in http://www.ddeaf.org.uk/test/default.css

Test page. It's now driving me crazy again (as is the heat) - I think I'll try Paul Sowden's script as Tailslide suggested earlier...



caz -> RE: Importing style sheet isn't working (6/23/2005 9:13:27)

Can't you just direct Opera users (on the page) to the View>Zoom facility on their menu bar? It's too hot not to take the easy way out [;)]



Tailslide -> RE: Importing style sheet isn't working (6/23/2005 9:22:34)

I've found Paul's stylesheet to be relatively simple to use - only problems I've run into is being careful about how I specify the stylesheets - you know the default, preferred, alternate etc etc. It wasn't a problem when I was just doing a bigger text version of my original stylesheet - real easy. Problem's arose when I did the zoom layout thing with a totally different look - that meant taking all the stylesheets to pieces and putting them back together - finished it yesterday finally. Thought I'd done it last week and then I took a look at the big text version in browsercam remote access on Safari and there were gaps in the background-image - grrrr.



womble -> RE: Importing style sheet isn't working (6/23/2005 11:41:15)

Well, I am now officially very very frustrated. Having ditched yesterday's approach after I tried to add in an extra stylesheet and it broke it, I decided to admit defeat and try out Paul Sowden's script from the A List Apart site...

Now I have a style switcher that doesn't do anything! (not just Opera - it doesn't do anything in any of the broswers!)[:@] I've validated my html and css - no problems there. Checked and rechecked against the code in the article - all seems well. Even checked out Tailslide's site as she's using that script to see if I could find any differences between what she's using and what I'm using. Nothing significantly different as far as I can see (though I'm getting to the point where everything just looks the same now).

The revised version's here - has anyone any idea why this isn't working?

I'm getting to the point where I may well just have to give everyone a magnifying glass!



Tailslide -> RE: Importing style sheet isn't working (6/23/2005 12:23:04)

Womble

I've got this to work for me locally on FF and IE and almost on Opera (didn't like the medium one). Not saying this is right - but it works.

In your html put this in:

<link rel="stylesheet" type="text/css" href="default.css" media="screen" />
<link rel="stylesheet" type="text/css" href="default.css" title="standard" media="screen" />
<link rel="alternate stylesheet" type="text/css" media="screen" title="mediumtext" href="mediumFont.css" />
<link rel="alternate stylesheet" type="text/css" media="screen" title="largetext" href="largeFont.css" />
<link rel="alternate stylesheet" type="text/css" media="screen" title="exlargetext" href="exlargeFont.css" />

and in your mediumtext.css change the font to font-size: medium;

In your largefont.css change the font from x-large to large;

Now try.


Edit: oh dear - just noticed that you've got a couple of typos Womble which'll be why there's been trouble - on the medium and large stylesheet links you've got:
setActiveSyleSheet



womble -> RE: Importing style sheet isn't working (6/24/2005 7:07:27)

Nope, that didn't work either [:@], though thanks for pointing that out. I've tried uploading it to the server (here) to see if that makes any difference, and still nothing's happening.

Got to go out now, but I'll ponder some more later. This is not going to defeat me! Just re-validated the html and css and that's fine. I'm thinking now it must be something to do with the script, though way I don't know as it's the same one you're using Tailslide. Any javascript experts around?



Tailslide -> RE: Importing style sheet isn't working (6/24/2005 7:41:59)

ARRRGH! We'll get there!

Just had a look and I can't find the styleswitcher.js when I looked for it - is it in the same folder as the files?



womble -> RE: Importing style sheet isn't working (6/24/2005 13:41:34)

Ooops! [sm=icon_redface.gif] That's because I forgot to upload it this time! (Done it now). Well I spent the afternoon at a hospital appointment, then having coffee with some friends, but spent most of the time pondering this stylesheet switching and totally lost track of the conversation!

Next step - I've dug out my javascript book and I'm going to have a leaf through that - I did wonder if it could be anything to do with using reserved words as I seem to remember that default is a reserved word in javascript, and with the main stylesheet being default.css, wondering if that was affecting it, though as it was sort of working with the last script, I don't think it can be that. Just sort of thinking out loud now. I'm now also wondering if I have any conflicts in the css itself that's stopping it from working, but again they're the same stylesheets as before. I have revalidated since then and corrected a few of the warnings that came up when I validated, though they were to do with the background and foreground colours, so shouldn't affect the font sizes at all (though may bring me problems when I eventually get it working and add in the changing background colour options!). Anyway, I'm going to go through the css again and just check - fortunately there's nothing good on TV tonight!



Tailslide -> RE: Importing style sheet isn't working (6/24/2005 14:38:15)

Here you go: womble/accessibility.html



womble -> RE: Importing style sheet isn't working (6/25/2005 5:24:25)

Thankyou, thankyou so much. You're a star! [sm=bowdown.gif]

It took me a while to work out what you'd done (I was searching the css for something I'd missed) until I spotted the javascript. My knowledge of javascript is basic, so I'd never have got there in a million years.

I did have a bit of a panic when I started trying it in different browsers and was getting some rather strange results - started off in x-lrage mode in IE, small in FF, but standard in Mozilla, Netscape and Opera...then it suddenly occured to me that maybe it was the effect of the cookies that was doing that. (Then spent another 5 minutes trying to remember what cookies are filed under on my system). Went in, deleted the offending cookie, and all's working fine! Success at last! Thank you so much! [:)]



Tailslide -> RE: Importing style sheet isn't working (6/25/2005 5:28:39)

You're most welcome Womble. [:)]



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.078125