Skip to main content
R
RosieGp
Known Participant
February 17, 2010
Question

apply a stylesheet in cfm file

  • February 17, 2010
  • 3 replies
  • 8153 views

Hi,

I want to use a stylesheet that already exist to add border and background color to html format data that the user enters. how to include the stylesheet for the data to appear that format...

my code...

1. data entered by user example:

<table>

<tr><td class="col1">Number of Oranges</td>
<td class="col2">3</td>

</table>

2. Display.cfm

<style>
<link href=http://nmo568uyt/coldfusion/test/display.css rel="stylesheet" type="text/css" media="all" />
</style>
<cfif structKeyExists(form,"TextByUser") >
<cfif form.type eq "HTML">
   <cfoutput>
                #form.TextByUserr#
            </cfoutput>
        </cfif>
</cfif>

3. display.css

#test1   { margin: 0 }
#test1 h2    { margin: 0 }
#test1 table     { border-collapse: collapse   }
#test1 table th     { font-weight: bold }
#test1 table td     { text-align: left; margin: 0 }
#test1 table td.col1        { width: 40% }
#test1 table td.col2        { width: 30% }
#test1 table td.col3         { width: 30% }
#test1 table td.col1span        { width: 60% }
#test1 table td.col2span        { width: 40% }

Any help is appreciated...

    This topic has been closed for replies.

    3 replies

    F
    Flashdakota
    Inspiring
    February 24, 2010

    Hi

    I think you need to remove

    <style>
    <link href=http://nmo568uyt/coldfusion/test/display.css rel="stylesheet" type="text/css" media="all" />
    </style>

    put <link href=http://nmo568uyt/coldfusion/test/display.css rel="stylesheet" type="text/css" media="all" /> inside the head of your html code.

    That may help you.

    Regards

    Delon

    A
    A***
    Inspiring
    February 19, 2010

    If you have access to the CSS file

    1.  In the CSS file add your border and background to the class or id you want to manipulate e.g. for all tables

          table {

                border: 1px solid #6b7272;

                background-color: #E8E8E8;

          }

    2.  Reference your CSS file within the head:

    <head>

          ...

          <link href="http://nmo568uyt/coldfusion/test/display.css"  rel="stylesheet" type="text/css" />

          ...

    </head>

    If you cannot access and/or modify the CSS file

    Put your modification within the head of the display page. All your CSS will cascade.

    <head>

          <style type='text/css'>

          table {

                border: 1px solid #6b7272;

                background-color: #E8E8E8;

          }

          </style>

    </head>

    http://w3schools.com/css/css_howto.asp

    A
    Adam Cameron.
    Inspiring
    February 19, 2010

    You need to realise that it's not CF that is including the CSS file, it's the user's web browser.  All CF does is build the HTML page

    which then gets sent to the browser, where it is rendered, including loading and applying any CSS that it's told to.

    So provided your resultant HTML output has valid references to the CSS you want to use, it'll work.  CF has nothing to do with it, really.

    In your case, you <link /> tag is in the middle of a <style/> block, which I don't think is syntactically valid HTML, so the <link/> will be getting ignored.  A <style /> block should have CSS in it, not HTML.  Provided the href in the <link> is correct, all you need is the <link />, not the <style/> tags.

    --

    Adam

    A
    Adam Cameron.
    Inspiring
    February 19, 2010
    In your case, you <link /> tag is in the middle of a <style/> block, which I don't think is syntactically valid HTML,

    Verified: it is not syntactically valid, nor does it actually work (because those two concepts are not necessarily equivalent).

    A good tool for checking these things is the mark-up validator @ the W3C website:

    http://validator.w3.org/

    Also Firebug is a good Firefox plug-in for checking what's going on with your CSS.

    Or indeed just the error console, on Firefox.  It complains about the <link/> in the <style/> block.

    --

    Adam

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices