Forum Moderators: not2easy
Scenario:
I want to include low-res images for on-screen display and high-res images for users to print
<!--
CSS links in the <head>
-->
<link rel="stylesheet" type="text/css" media="screen" href="../myCssFolder/myScreensSheet.css">
<link rel="stylesheet" type="text/css" media="print" href="../myCssFolder/myPrintSheet.css">
/* <from myScreensSheet.css> */
.printOnly {
display: none;
}
.screenOnly {
display:inline;
}
/* </fromMyScreensSheet> */
/* <from myPrintSheet.css> */
img, .screenOnly, .copyrighted, #myHeader, #myFooter {
display: none;
}
/* NB including OR excluding img here makes no difference to the bug */
.printOnly {
display: run-in! important;
}
/* </from myPrintSheet.css> */
<html>
<img class="screenOnly" alt="Screen Only" src="screen-only.jpg">
<img class="printOnly" alt="Print Only" src="print-only.jpg">
Output: Screen:
-------------------------
Displays ALL content as intended in FF2, IE7 and Opera 9.22
Output: Print:
-------------------------
OK:
------
in FF2 and IE7:
Does display all (text and images) as intended (i.e some sections are visible, others are invisible)
in Opera
Does display text as intended
BUG:
------
Does NOT display ANY IMAGES in Opera; the alt tags are displayed instead
So far, my Google-Fu and my own lack of CSS knowledge have conspired to let me down...
So, here I am (again), asking for HELP!
Note: No physical printer tested yet, instead only using the browsers'print previews and a virtual printer (CutePDF)... but even if it DOES work as intended on a physical printer... its still a bug at print-preview time, which is... erm... bugging the %$&@! out of me
However, setting the img to display:block; should cause the image to be downloaded. You are trying to set display:run-in; - I wonder whether this is an issue? As far as I'm aware, display:run-in; is only supported by Opera9, no other browser supports this property correctly.
What if, in your myPrintSheet.css stylesheet, you try setting:
img.printOnly {
display:inline! important;
}
If an IMG is set to display:none; then Opera will not even download the image, whereas other browsers will.
You are trying to set display:run-in; - I wonder whether this is an issue?
As far as I'm aware, display:run-in; is only supported by Opera9, no other browser supports this property correctly.
What if, in your myPrintSheet.css stylesheet, you try setting:img.printOnly {
display:inline! important;
}
Tried it, again... still no luck
Thanks for taking the time to think on my behalf though
I appreciate it :)
