CFDocument and CSS Hell
Thursday 16 August 2007 - Filed under Code
OK - how do I use a CSS stylesheet and CFDocument?
Right now I have several very simple .cfm pages - a print.css file and my print.cfm - which pulls in my various pages via cfinclude:
-
<h4>Waste Pickup Request System Manual<h4>
This works and gives me my un-styled content.
OK. But where do I include my stylesheet?
I tried:
-
...
Doesn't work. Digging around in the live docs - someone mentions including it inside the cfdocument:
-
...
Nope. Doesn't work.
If I include it within each cddocument element - it works - but I get weird CSS scaling issues:
-
<h4>Waste Pickup Request System Manual<h4>
If I include the stylesheet withing my cfincluded page - it works -and I guess that is going to be my solution unless someone can tell me what I'm doing wrong here! :)
Update - August 17
My final solution - which seems to work OK... I include the stylesheet within the main cfdocument - and that seems to style the cfincluded templates. Then I call the stylesheet again within each cfdocumentitem to style the header and footer.
-
<h4>Manual: HSB Waste Pickup Request System</h4>
-
-
-
-
-
<p>PAGE: #cfdocument.currentpagenumber# of #cfdocument.totalpagecount#</p>
Update - August 20
Tried Julian's suggestion (see comments below) of using the file protocol:
But oddly enough this didn't work at all - no styles were applied...
2007-08-16 » Jim Priest
16 August 2007 @ 12:37 pm
What would be nice is if I could do:
cfdocument stylesheet = “print.css”
16 August 2007 @ 1:21 pm
You’re not doing anything wrong there. What you’re doing is exactly what you should be :)
An alternative is to have a generated HTML page and then use cfhttp to get that page and then use it to create the cfdocument. You might find this produces more reliable results and allows you to use a stylesheet
16 August 2007 @ 1:27 pm
The problem is these pages are just content – there is no HTML header/footer, etc. I could maybe generate a printer friendly index.cfm and call that with CFDcoument – but that seems like extra work I shouldn’t have to do.
16 August 2007 @ 10:27 pm
agreed. Are you perchance running CF8? I found cfdocument far better with CF8 than 7, even with existing apps.
16 August 2007 @ 11:10 pm
First off Jim is correct, you need to have a fully valid HTML page in order to get cfdocument to even remotely render correctly.
I would recommend (and what I personally do) is create your page statically first with some dummy data and then validate it against the w3c validator. Make sure your using XHTML 1.0 Transitional, that seems it to work best.
The final step is DO NOT use link on inline styles within your cfdocument, you MUST use import to load your css. This was mentioned to me a long time ago and I’ve always remembered it. It’s saved me a bunch of time and frustration.
17 August 2007 @ 8:55 am
Not running CF8 (yet)… Tony – I’ll try using an import vs. a link to call my CSS. I’ve updated the post above with my final solution – and it seems to work OK. And FWIW – none of my cfincluded documents include any doctype, head/body, etc…
17 August 2007 @ 10:01 am
OK – FWIW – I get the same behavior with @import. I still have to include it within each cfdocumentitem, etc – no different than using link…
20 August 2007 @ 3:52 am
Jim, try using the file protocol with a file system path to the stylesheet:
[link rel=â€stylesheet†type=â€text/css†href=â€file:///#expandPath(myCssDirectory)#docstyles.cssâ€]
Note the 3 slashes, not 2. This is vital.
Also, my understanding is that only html 4.0 is supported in cfdocument (ie not xhtml).
21 September 2009 @ 2:15 pm
Your post helped me figure out a similar problem that I was having. I realize that this post is over 2 years old, but maybe my reply will help somebody ;)
My solution ended up being that I include a single style sheet to use with the PDF layout within the tag, but I constructed a valid HTML document inside this tag and used a inside the of this page to bring in my css.
In this case, it doesn’t matter that you are including seperate pieces of content from different places, because you are feeding the cfdocument tag a valid document.
Here is the code I’m referring to (I’m using coldbox, so ignore Event or view related lines):
CFDocument Page