CSS Property changes via Javascript trashes CSS print version

[Julie Siebel]

Apologies...I'm sure this has been asked before, but I can't seem to
come up with the correct Google search terms.

While my problem is with stylesheets, the errors are being caused by
my javascript, so this seemed a more appropriate place to post.

I'm using a media=print style sheet to do a version of a web page that
I am building. Currently, I'm working on the IE version.

I have an HTML page and 2 style sheets which all validate (this is a
FIRST for me! lol - now ya KNOW how desperate I am!) with the
exception of some IE scrollbar property stuff - but I deleted that and
it still didn't fix my problem.

I have a .js file which manipulates the stylesheet properties - I
adjust the vertical height of an "overflow: auto" scrollbar div so
that it fits the available space when the window is resized, and I
turn certain divs on and off to emulate a tab bar with product
information hidden beneath.

In the Media = "print" stylesheet, I want to print the scrollbar div
full width, and to print all of the off/on divs. However, any item
that has been manipulated with Javascript doesn't print properly.

The scrollbar text prints in a narrow column, as if the width from the
screen version is applied; I've tried to explicitly override this in
the style sheet (margin: 0, setting a width, etc.), but with no
result.

For the on/off divs, any tab that I've actually clicked on before
going to print preview doesn't show as "visible" when printed, even
though that is explicitly declared in the print stylesheet.

The really WEIRD thing is that if I delete the DOCTYPE designation
entirely, it all works just peachy!

The javacript to adjust the scroll bar uses IE specific addressing,
e.g. thisdivname.style.height = xxx - and the print version of the
style sheet works fine in Netscape, which can't do anything with this
command, but it has precisely the same problem with the on/off tab
divs (which DO work in Netscape) that IE does.

If I remove the javascript entirely (or the doctype as mentioned
above) everything works as expected.

What the heck am I doing wrong?

I can post the HTML, CSS files, and .js files here if needed, but that
seemed a little excessive considering how blabby I've already been.

Can someone steer me to a solution/tutorial/bourbon bottle?

Julie

P.S. E-mail to this address goes to a separate folder, which might be
looked at but might not! lol. To reach me directly, e-mail my first
name plus pandemoniumgraphics.com; please post solutions to the
newsgroup so it'll come up in a search the next time someone has this
problem.

 

[Thomas 'PointedEars' Lahn]

Apologies...I'm sure this has been asked before, but I can't seem to
come up with the correct Google search terms.

Maybe "quirks mode", maybe "error description".

While my problem is with stylesheets, the errors are being caused by
my javascript, so this seemed a more appropriate place to post.
Correct.

In the Media = "print" stylesheet, I want to print the scrollbar div
full width, and to print all of the off/on divs. However, any item
that has been manipulated with Javascript doesn't print properly.

The scrollbar text prints in a narrow column, as if the width from the
screen version is applied; I've tried to explicitly override this in
the style sheet (margin: 0, setting a width, etc.), but with no
result.

For the on/off divs, any tab that I've actually clicked on before
going to print preview doesn't show as "visible" when printed, even
though that is explicitly declared in the print stylesheet.

The really WEIRD thing is that if I delete the DOCTYPE designation
entirely, it all works just peachy!

Sounds like a DOM problem caused by switching from/to Quirks Mode.

The javacript to adjust the scroll bar uses IE specific addressing,
e.g. thisdivname.style.height = xxx

Why don't you just stop that proprietary nonsense and code
standards-compliant? Netscape does not know that this is
intended for IE and calls that code anyway, resulting in
a script error. I assume you mean ID with "name", so write

var o = null;

if (typeof document.getElementsById == "function"
|| typeof document.getElementsById == "object")
{
o = document.getElementsById('thisdivname');
}
else if (document.all)
{
o = document.all['thisdivname'];
}
else if (document.layers)
{
o = document.layers['thisdivbyname'];
}
if (typeof o.length != "undefined"
&& typeof o[0] == "object)
{
o = o[0];
}

if (o
&& typeof o.style != "undefined"
&& typeof o.style.height != "undefined")
{
o.style.height = "...px";
}

or more simple:

var o = dhtml.getElem('id', 'thisdivname');
if (o)
{
if (typeof o.length != "undefined"
&& typeof o[0] == "object")
{
o = o[0];
}

if (typeof o.style != "undefined"
&& typeof o.style.height != "undefined")
{
o.style.height = "...px";
}
}

If I remove the javascript entirely (or the doctype as mentioned
above) everything works as expected.

So the problem is in the script source code.

What the heck am I doing wrong?

Impossible to tell with that few *useful* information.

I can post the HTML, CSS files, and .js files here if needed, but that
seemed a little excessive

Post the URL of the HTML document instead. We can hopefully
dig the links to the CSS and JS files from its source code.

considering how blabby I've already been.

Yes, indeed.

Can someone steer me to a solution/tutorial/bourbon bottle?

Much depends on the DOCTYPE declaration you have (not) used.

To reach me directly, e-mail my first name plus pandemoniumgraphics.com;

You may want to read on the Reply-To header to prevent
your readers from twiddling the correct address together.

please post solutions to the newsgroup

Of course.


PointedEars

 

[Julie Siebel]

Thomas:

Sorry for the late reply - your response was several weeks after my
original post and I've been out of town.

I finally just worked around the problem by including a duplicate of
the text for the tabs, and hiding it except for the print version.
Since it is never manipulated by Javascript, it works great, but it
seems a bit inelegant.

I received several e-mail responses that told me if it worked with no
doctype declaration, just leave it out, but for many reasons thats was
a bad idea, especially for this doc. I'd like to figure this out for
the *next* time it come up.

Maybe "quirks mode", maybe "error description".

The page doesn't actually generate an error - it just won't print the
text properly if I have manipulated the div in *any* way with
javascript. The code and style sheets validate as "strict" - I've
tried both the strict and loose doctypes.

Sounds like a DOM problem caused by switching from/to Quirks Mode.


Why don't you just stop that proprietary nonsense and code
standards-compliant? Netscape does not know that this is
intended for IE and calls that code anyway, resulting in
a script error.

Please see below, re: (e-mail address removed)

So the problem is in the script source code.
Read <[email protected]>

Regarding your "it doesn't work" newsgroup reference: I never said "it
doesn't work" - works like a charm, except when I print it. I *always*
have my browser set to display the greatest amount of debugging info
possible. The scripts do NOT generate an error, and they work fine in
Netscape and IE both.

The problem, as stated (apparently not clearly enough) in the previous
message, is that if I hide or show a div via javascript using *any*
method for the "screen" version of the stylesheet, it will *always* be
hidden in the print version of the stylesheet, even if I explicitly
declare it as visible; and if I have adjusted a scrolling div using
javascript, it ignore the width setting in the print version of the
stylesheet. This is true in both IE and Netscape.

Impossible to tell with that few *useful* information.


Post the URL of the HTML document instead. We can hopefully
dig the links to the CSS and JS files from its source code.

That long and very complex version of the page is long gone and I know
that a lot of time has gone by since your post, but if created a mini
version duplicating the problem and uploaded it somewhere, would you
be still willing to take a look at it?

Yes, indeed.


Much depends on the DOCTYPE declaration you have (not) used.


You may want to read on the Reply-To header to prevent
your readers from twiddling the correct address together.

Sorry about that, but I live in the mountains and use solar power and
satellite internet, which doesn't have newsgroup service, so I have to
use Google to post. If you know of a way to set a reply-to using
Google Groups, I'd appreciate it. I used that blackhole address
exactly ONCE before for the previous post and received more than 50
virus laden files in four days!

Thanks for your help.

Julie Siebel
To reach me directly, e-mail my first name plus
pandemoniumgraphics.com

 

[Thomas 'PointedEars' Lahn]

I received several e-mail responses that told me if it worked with no
doctype declaration, just leave it out, but for many reasons thats was
a bad idea, especially for this doc.

Yeah, those people are, alas, incompetent
enough to recommend such utter nonsense.

I'd like to figure this out for the *next* time it come up.

You have invalid HTML until then which is
neither required, necessary nor reasonable.

Thomas 'PointedEars' Lahn <[email protected]> wrote [...]

Please trim the attribution line next time or get a newsreader which
does this automagically. A line should not exceed 78 characters and
the message ID is superfluous information as it is already contained
in the headers.

The page doesn't actually generate an error - it just won't print
the text properly if I have manipulated the div in *any* way with
javascript. The code and style sheets validate as "strict" - I've
tried both the strict and loose doctypes.

Straynge. [psf 4.15] Source code would be good.

That long and very complex version of the page is long gone and I know
that a lot of time has gone by since your post, but if created a mini
version duplicating the problem and uploaded it somewhere, would you
be still willing to take a look at it?

Sure, and I assume anyone else would be, too.

Sorry about that, but I live in the mountains and use solar power and
satellite internet, which doesn't have newsgroup service, so I have to
use Google to post.

There are public newsservers available, there is no need to
use borken web interfaces, like Google Groups, for posting.

If you know of a way to set a reply-to using Google Groups, I'd appreciate
it.

Sorry, there is no field for that in "My account", so I guess there is
no way. For its flaws and missing features, I avoid Google Groups for
posting and use a decent newsreader instead. GG is great for research,
though.

I used that blackhole address exactly ONCE before for the previous post
and received more than 50 virus laden files in four days!

There is no excuse to put your problems on the back of other people.
You should get, e.g., an e-mail provider with a working virus filter.
There are some, even for free. I am using WEB.DE-FreeMail's, if you
don't mind a German web interface (you can use the mail client in your
native tongue anyway; BTW: I never knew that there is a place called
"Germantown" ), you'll like it. I get no virus spam anymore and it
reduces the visible bulk spam, too.

(A plus is that you at least seem to be using an e-mail address, not
something that only looks like one; the big minus is that no private
communication is possible anyway, unless the To: address is changed
before sending.)


PointedEars

P.S.
Please read <http://www.allmyfaqs.com/faq.pl?How_to_post>
to improve your quoting style.

 

[Dr John Stockton]

JRS: In article <[email protected]>, seen in
Thomas 'PointedEars' Lahn

Please trim the attribution line next time or get a newsreader which
does this automagically. A line should not exceed 78 characters and
the message ID is superfluous information as it is already contained
in the headers.

Please try not to be stupid. The message-ID is important as a means of
identifying, without ambiguity, a message that may not otherwise be
immediately accessible on the reader's system.

You appear to have very restricted experience of the world and of
Usenet, being familiar with only certain types of system; it is arrogant
to believe that you know everything, even though you seem to be a
student at some sort of further education establishment.

Your naive dogmatism devalues your credibility.