...

View Full Version : printStyle css acting on Gradient Background



joefrench
01-21-2008, 10:20 PM
I have many html files that has the background set to gradient with the following style:

<body class=bodyBG style="filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#add8e6', startColorstr='#FFFFFF', gradientType='0');"><center>
On print, I want the background to be white. I have a .css style sheet that has the following that works if I'm just using "normal" background color settings (i.e. - bgcolor=lightblue) but is not working with this style:

.bodyBG { background-color:white;}
What do I need to change to get this to work with this gradient style?

Thanks

mjlorbet
01-21-2008, 11:48 PM
in ie (and possibly others) you can use code like this to detect the print events and change your styles before and after the print event (just keep in mind if the print is cancelled, onafterprint might not fire). it sounds like you're setting your self up for some difficulty though, I'd just let the background get printed as is, sure the user loses a little ink but you might avoid a nightmare in finding a series of glitchmode events to create similar behaviors on the different browsers you'll be targetting.

<head>
<script>
function changeToWhiteBack()
{
document.body.className = "class name for print style";
document.body.style = "";
}
function changeToCoolStyle()
{
document.body.className = "class name for normal use";
document.body.style = "styles applied not listed in your css class";
}
</script>
</head>
<body onbeforeprint="changeToWhiteBack();" onafterprint="changeToCoolStyle();" ...>
</body>

joefrench
01-22-2008, 02:45 PM
Thanks Mike.
I have tried to apply this but can't seem to get it to work. This just turns the page white. This is going to be used for ISO documentation so print appearance is a concern. Here's what I have:

<script>
function changeToWhiteBack()
{
document.body.className = "whiteStyle";
document.body.style = "";
}
function changeToCoolStyle()
{
document.body.className = "gradientStyle";
document.body.style = "filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#add8e6', startColorstr='#FFFFFF', gradientType='0');"
}
</script>
</head>
<body onbeforeprint="changeToWhiteBack();" onafterprint="changeToCoolStyle();"><center>
I have tried a few variations of this to no avail.

Apostropartheid
01-22-2008, 05:11 PM
Did it ever occur to you that this'll only work for MSIE?

joefrench
01-22-2008, 06:09 PM
Did it ever occur to you that this'll only work for MSIE?

That's fine. This is for internal use in my company and everyone here uses MSIE.

joefrench
01-22-2008, 07:14 PM
Is there another way to do this?

Apostropartheid
01-22-2008, 07:18 PM
Alright if you like...


<style type="text/css">
@media screen {
body {
filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#add8e6', startColorstr='#FFFFFF', gradientType='0');
}
}
@media print {
body {
background: #fff;
}
}
</style>

joefrench
01-22-2008, 07:27 PM
Thank you CyanLight. Just curious. Is your hesitation on this due to the fact that it will only work for MSIE?

Apostropartheid
01-22-2008, 07:31 PM
Yes. It seems a bit hypocritical to me, too, seeing as iso standardizes things. Electronic documents don't have an expiry date, either. What if IE totally dies out (unlikely) and businesses ditch it for Ffx or Opera? Alright it's just a background, but it's the little touches...=P

joefrench
01-22-2008, 07:45 PM
I see. Personally, I'd rather it be all white background but my boss is a fanatic for aesthetics. (Why an engineer is letting aesthetics trump functionality is beyond me.)
These docs are just project information which is basically just detailing meeting notes. Besides....I'm sure I'll be retired (only 45 yrs. away) before this place even thinks about switching away from any microsoft product. They'll stay at IE7 if need be.:o
As you said, it's just a background....

mjlorbet
01-22-2008, 11:09 PM
$get("elementID").style.filter = "filter name string";



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum