Skip to main content
Known Participant
February 13, 2007
Question

CFInclude & external CSS

  • February 13, 2007
  • 5 replies
  • 1568 views
I was wonde if someone can tell me if it's possible to link an external CSS to my CFM document. Been playing around with this and not luck.

This is how I have it set up.

My CSS contains info on fontsize and color
Main CFM file
Paragraph.cfm This file is added via CFInclude to Main.cfm File. My CSS is effects this file.

Thanks in advance.
    This topic has been closed for replies.

    5 replies

    hhr_jbAuthor
    Known Participant
    February 13, 2007
    I had everything all coded on 1 page. Then Tried to break them down to idividual pages. here's my code for Main.cfm

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <!-- saved from url=(0014)about:internet -->
    <html xmlns=" http://www.w3.org/1999/xhtml">
    <head>
    <title>WebMain.jpg</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />



    <link href="StyleSheets/Footer.css" rel="stylesheet" type="text/css" />
    <link href="StyleSheets/Gray_ling.css" rel="stylesheet" type="text/css" />
    <link href="StyleSheets/Light_link.css" rel="stylesheet" type="text/css" />

    </head>

    </head>
    <script type="text/javascript" language="javascript" src="sniffer.js"></script>
    <script type="text/javascript" language="javascript1.2" src="custom.js"></script>
    <script type="text/javascript" language="javascript1.2" src="style.js"></script>

    <body leftmargin="0" topmargin="0" bgcolor="#2C2324">
    <table border="0" cellpadding="0" cellspacing="0" width="800">

    <tr>
    <td><img src="images/spacer.gif" width="268" height="1" border="0" alt="" /></td>
    <td><img src="images/spacer.gif" width="271" height="1" border="0" alt="" /></td>
    <td><img src="images/spacer.gif" width="261" height="1" border="0" alt="" /></td>
    <td><img src="images/spacer.gif" width="1" height="1" border="0" alt="" /></td>
    </tr>

    <tr>
    <td><img name="WebMain_r1_c1" src="images/WebMain_r1_c1.jpg" width="268" height="95" border="0" id="WebMain_r1_c1" alt="" /></td>
    <td><img name="WebMain_r1_c2" src="images/WebMain_r1_c2.jpg" width="271" height="95" border="0" id="WebMain_r1_c2" alt="" /></td>
    <td><img name="WebMain_r1_c3" src="images/WebMain_r1_c3.jpg" width="261" height="95" border="0" id="WebMain_r1_c3" alt="" /></td>
    <td><img src="images/spacer.gif" width="1" height="95" border="0" alt="" /></td>
    </tr>
    <tr>
    <td colspan="3"><img name="WebMain_r2_c1" src="images/WebMain_r2_c1.jpg" width="800" height="317" border="0" id="WebMain_r2_c1" alt="" /></td>
    <td><img src="images/spacer.gif" width="1" height="317" border="0" alt="" /></td>
    </tr>
    <tr>
    <td colspan="3" valign="top"><br />
    <table width="99%" border="0" align="center" cellpadding="0" cellspacing="0">
    <tr>
    <td> </td>
    </tr>
    </table></td>
    <td><img src="images/spacer.gif" width="1" height="209" border="0" alt="" /></td>
    </tr>
    <cfinclude template="Footer.cfm">
    </table>
    <script type="text/javascript" language="javascript1.2" src="menu.js"></script>
    </body>
    </html>
    Inspiring
    February 13, 2007
    The CSS does not work. It doesn't apply to the paragraph.cfm.

    Well to me that points to the CSS not being found or not properly
    attaching to the elements. Do you have any testing that show the CSS is
    properly written to work with the content in paragraph.cfm. And are you
    sure it is properly linked. For the latter, copying the href value into
    the url of the browser is a good way to confirm the that link is
    properly setup.
    hhr_jbAuthor
    Known Participant
    February 13, 2007
    Thanks for all your comments.

    Corret I have all the links in the Main.cfm, My paragraph.cfm does not have it's own <head>,/head>. for some reason when I link everything together in the main.cfm The CSS does not work. It doesn't apply to the paragraph.cfm.






    Inspiring
    February 13, 2007
    Remember when you use cfinclude, the final location of the HTML code generated by the include will be Main.cfm, not paragraph.cfm. If the two files are in different directories, you need to make sure that your relative paths to your stylesheet are in relation from Main.cfm's location.

    Inspiring
    February 13, 2007
    My CSS contains info on fontsize and color. Main CFM file Paragraph.cfm
    This file is added via CFInclude to Main.cfm File. My CSS is effects
    this file.

    Quite possible. But it should be linked in the Main.cfm file. CSS
    links are supposed to be in the <head></head> section of your page. I
    presume and hope the your included paragraph.cfm file does not have its
    own <head></head> section.