|
| |
|
|
womble
Posts: 5461
Joined: 3/14/2005
From: Living on the edge
Status: offline
 |
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!)
_____________________________
~~ "A cruel god ain't no god at all" ~~
|
|
|
|
caz
Posts: 3468
Joined: 10/10/2001
From: Somewhere south of Chester, UK
Status: offline
|
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.
< Message edited by jaybee -- 6/21/2005 5:16:20 >
_____________________________
Do not meddle in the affairs of cats, for they are subtle and will dance, or more on your keyboard.
Cheshire cat. www.doracat.co.uk
I remember when it took less than 4hrs to fly across the Atlantic.
| |
|
|
|
womble
Posts: 5461
Joined: 3/14/2005
From: Living on the edge
Status: offline
|
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
_____________________________
~~ "A cruel god ain't no god at all" ~~
| |
|
|
|
caz
Posts: 3468
Joined: 10/10/2001
From: Somewhere south of Chester, UK
Status: offline
|
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.
_____________________________
Do not meddle in the affairs of cats, for they are subtle and will dance, or more on your keyboard.
Cheshire cat. www.doracat.co.uk
I remember when it took less than 4hrs to fly across the Atlantic.
| |
|
|
|
dpf
Posts: 7121
Joined: 11/12/2003
From: India-napolis
Status: offline
|
RE: Importing style sheet isn't working - 6/21/2005 13:23:53
Ive been puzzling over this script:
quote:
<script type="text/javascript">
//< 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>
< Message edited by womble -- 6/22/2005 7:20:27 >
_____________________________
~~ "A cruel god ain't no god at all" ~~
| |
|
|
|
c1sissy
Posts: 5079
Joined: 7/20/2002
From: NJ
Status: offline
|
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/
_____________________________
Deb-aka-c4Ksissy
high panjandurum and alpha female of the silverback tribe
As decreed by Jesper 5-24-2003.
The only stupid question is... the one that is never asked!!
http://directory.css-styling.com
http://fmsforum.com
http://positioniseverything.net/
http://www.tanfa.co.uk/
| |
|
|
|
caz
Posts: 3468
Joined: 10/10/2001
From: Somewhere south of Chester, UK
Status: offline
|
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.
_____________________________
Do not meddle in the affairs of cats, for they are subtle and will dance, or more on your keyboard.
Cheshire cat. www.doracat.co.uk
I remember when it took less than 4hrs to fly across the Atlantic.
| |
|
|
|
caz
Posts: 3468
Joined: 10/10/2001
From: Somewhere south of Chester, UK
Status: offline
|
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.
_____________________________
Do not meddle in the affairs of cats, for they are subtle and will dance, or more on your keyboard.
Cheshire cat. www.doracat.co.uk
I remember when it took less than 4hrs to fly across the Atlantic.
| |
|
|
|
c1sissy
Posts: 5079
Joined: 7/20/2002
From: NJ
Status: offline
|
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 and the past week, I have done nill with coding)
_____________________________
Deb-aka-c4Ksissy
high panjandurum and alpha female of the silverback tribe
As decreed by Jesper 5-24-2003.
The only stupid question is... the one that is never asked!!
http://directory.css-styling.com
http://fmsforum.com
http://positioniseverything.net/
http://www.tanfa.co.uk/
| |
|
|
|
Tailslide
Posts: 5915
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
|
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.
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
Tailslide
Posts: 5915
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
|
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
< Message edited by Tailslide -- 6/23/2005 13:40:22 >
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
Tailslide
Posts: 5915
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
|
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?
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
womble
Posts: 5461
Joined: 3/14/2005
From: Living on the edge
Status: offline
|
RE: Importing style sheet isn't working - 6/24/2005 13:41:34
Ooops!  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!
_____________________________
~~ "A cruel god ain't no god at all" ~~
| |
|
 New Messages |
 No New Messages |
 Hot Topic w/ New Messages |
 Hot Topic w/o New Messages |
 Locked w/ New Messages |
 Locked w/o New Messages |
|
Post New Thread
Reply to Message
Post New Poll
Submit Vote
Delete My Own Post
Delete My Own Thread
Rate Posts
|
|
|
Printable Version 
