New to this... CSS styles are not applied to the HTML within the PERL script. Please help!

Anonymous Monk has asked for the wisdom of the Perl Monks concerning the following question:

I wanted to add a contact form to my project website, so decided to go for a very popular PERL FormMail script, only trouble is, it needs to be in keeping with the rest of the site. After having some initial problems getting the script to run properly with my modified form, now the HTML is not following the CSS style rules. Can any wise souls out there help a poor newbie? Please? The following is ALL of the code:- (it can also be viewed at www.jbritten.co.uk/contact/fm-contact-us.cgi)

#!/usr/bin/perl
use strict;
use warnings;
use Authen::Captcha;
use CGI ;

my $cgi = new CGI ;

# this directory is not accessible via the web.
my $captcha_datadir = "/websites/123reg/LinuxPackage23/jb/ri/tt/jbritt
+en.co.uk/public_html/.captcha_data";

# this directory will store the captcha images. This should
# be accessible via the web because it will be included on the page.
my $captcha_outputdir = "/websites/123reg/LinuxPackage23/jb/ri/tt/jbri
+tten.co.uk/public_html/contact/img";

# This directory is the same as above, but using the web accessible
# URL path.
my $image_dir = "/contact/img";

# This should be the location of the FormMail.cgi script.
my $formmail = "/contact/FormMail.cgi";

# This is where the user should be taken to after submitting the form.
my $redirect = "http://jbritten.co.uk/contact/email_sent.html";


my $captcha = Authen::Captcha->new(
  data_folder => $captcha_datadir,
  output_folder => $captcha_outputdir,
  );

my ($md5sum, $chars) = $captcha->generate_code(4);
# eliminate ambiguous chars from $chars
my $bad_chars = 1;
while ($bad_chars) {
    if ( $chars =~ m/o|0|O|l|i|1|q|9|6|b|s|S|5|2|Z/) {
        ($md5sum, $chars) = $captcha->generate_code(4);
    } else {
        $bad_chars = 0;
    }
}
my $title      = 'Contact Us' ;
my $recipient  = 'james\@jbritten.co.uk' ;
my $invitation = 'If you would like to request a quote, have a chat or
+ if you require any information whatsoever, you can use the form belo
+w to get in touch with us. All enquiries will be answered within 24 h
+ours.' ;
my $email    ;
my $realname  ;

print $cgi->header () ;

print << "END_OF_HTML";

<!doctype html>
<html><!-- InstanceBegin template="/Templates/layout.dwt" codeOutsideH
+TMLIsLocked="false" -->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<!-- InstanceBeginEditable name="doctitle" -->
<title>J Britten Web | Design | Photography Contact Form</title>
<!-- InstanceEndEditable -->
<!--[if lt IE 9]>
       <script
       src="http://html5shiv.googlecode.com/svn/trunk/htm
       l5.js">
       </script
       <![endif]-->
<link href=“styles.css" rel="stylesheet" type="text/css" media="screen
+">
<link href="print.css" rel="stylesheet" type="text/css" media="print">
<link href="JBritten_mq.css" rel="stylesheet" type="text/css">
<style type="text/css">
body,td,th {
    font-family: Helvetica, "Arial Narrow", sans-serif;
}
</style>
<script src="includes/jquery-1.4.2.js" type="text/javascript"></script
+>
<script src="jQuery/js/jquery.jsocial.js" type="text/javascript"></scr
+ipt>
<script type="text/xml">
<!--
<oa:widgets>
  <oa:widget wid="2149023" binding="#social" />
</oa:widgets>
-->
</script>
<!-- InstanceBeginEditable name="head" -->
<!-- InstanceEndEditable -->
</head>



<body>
<!--container begins-->
<div ID="container">  
  
<header role="banner"> 

<a href="index.html"><img src="assets/images/HeadrLogo2.png" alt="Jame
+s Britten Web Design Photography Logo" width="255" height="251" class
+="fltlt"></a>

<h1>James Britten.</h1>
<h2>Web | Design | Photography</h2>
</header>
  
  <!--navigation ul-->
  <nav role="navigation">
  <h2>Main navigation</h2>
        <ul>
          <li><a href="aboutUs/index.html">Company</a></li>
          <li><a href="services/index.html">Services</a></li>
          <li><a href="webgallery/index.html">Web Design</a></li>
          <li><a href="photogallery/index.html">Photography</a></li>
          <li><a href="contact/index.html">Contact Us</a></li>
        </ul>
      </nav>
  <!-- InstanceBeginEditable name="content" -->
  <main>
    <h1>Contact Us.</h1>
    <p>If you would like to request a quote, have a chat or if you req
+uire any information whatsoever, you can use the form below to get in
+ touch with us. All enquiries will be answered within 24 hours.</p>
    <form action="/contact/FormMail.cgi" method="post" name="contactJa
+mes" id="contactJames">
      <fieldset>
        <legend>Your Contact Information</legend>
        <p>
          <label for="Name">Please enter your Name</label>
          <input type="text" name="Name" id="Name">
        </p>
        <p>
          <label for="email">Please enter your Email Address</label>
          <input type="text" name="email" id="email">
        </p>
        
      </fieldset>
      <fieldset>
      <legend>What is the nature of your enquiry?</legend>
      <p>
        
        <br>
        <label>
          <input type="checkbox" name="Services" value="Photography" i
+d="Services_1">
          Photography</label>
        <br>
        <label>
          <input type="checkbox" name="Services" value="Website Design
+" id="Services_2">
          Website Design</label>
        <br>
        <label>
          <input type="checkbox" name="Services" value="Website Develo
+pment" id="Services_3">
          Website Development</label>
        <br>
        <label>
          <input type="checkbox" name="Services" value="checkbox" id="
+Services_4">
          Checkbox</label>
        <br>
        <label>
          <input type="checkbox" name="Services" value="E-Commerce" id
+="Services_5">
          E-Commerce</label>
        <br>
        <label>
          <input type="checkbox" name="Services" value="Branding" id="
+Services_6">
          Branding</label>
        <br>
        <label>
          <input type="checkbox" name="Services" value="SEO" id="Servi
+ces_7">
          SEO</label>
        <br>
        <label>
          <input type="checkbox" name="Services" value="Copy Writing" 
+id="Services_8">
          Copy Writing</label>
        <br>
        <label>
          <input type="checkbox" name="Services" value="General Enquir
+y" id="Services_9">
          General Enquiry</label>
        <br>
        <label>
          <input type="checkbox" name="Services" value="Email Marketin
+g" id="Services_10">
          Email Marketing</label>
        <br>
        <label>
          <input type="checkbox" name="Services" value="checkbox" id="
+Services_11">
          Legacy Websites</label>
        <br>
      </p>
<p>
          <label for="message">Please include details about your enqui
+ry.</label>
          <textarea name="message" cols="45" rows="10" id="message"></
+textarea>
        </p>
      </fieldset>
      <fieldset><legend>Would you like to receive information from us 
+in the future?</legend>
        <p>
          <label for="Newsletter">Check the box if you would like to r
+eceive our newsletter.</label>
          <input name="Newsletter" type="checkbox" id="Newsletter" che
+cked>
        </p>
        
      </fieldset>
<!-- The following section displays a captcha request  -->
        <table>
<tr>
          <td><label>Enter the letters </label></td>
          <td><img src="/contact/img/$md5sum.png" /> <input type="text
+" size="20" name="captcha-text" id="captcha-text" /><td></td>
        </tr>
</table>
        <!-- End section -->

      <p>
        <input type="submit" name="button" id="button" value="Submit">
      </p>

<input type='hidden' name='title' value="Contact Us" >
<input type='hidden' name='recipient' value='james\@jbritten.co.uk' >
<input type='hidden' name='redirect' value="http://jbritten.co.uk/cont
+act/email_sent.html" >
<input type='hidden' name='captcha-md5sum' value="$md5sum" >

    </form>
   
  </main>
  <footer>
    <div class="fltlt">
      <ul>
        <li><a href="../aboutUs/index.html">Company</a></li>
          <li><a href="../services/index.html">Services</a></li>
          <li><a href="../webgallery/index.html">Web Design</a></li>
          <li><a href="../photogallery/index.html">Photography</a></li
+>
          <li><a href="../contact/form.html">Contact Us</a></li>
      </ul>
    </div>
    <div class="fltlt">
      <ul>
        <li>Photography</li>
        <li>Website design</li>
        <li>Branding</li>
        <li>SEO</li>
        <li>E-commerce</li>
        <li>Copy writing</li>
        <li>Email marketing</li>
      </ul>
    </div>
    <div class="copy"> © James Britten 2014. </div>
    <div class="social"></div>
    <script type="text/javascript">
// BeginOAWidget_Instance_2149023: #social
    
    $('.social').jsocial({
            twitter        :  'JBrittenPhoto',
            facebook    :  'facebook.com/james.britten.5011',
            flickr        :  '',
            delicious    :  '',
            linked        :  '',
            youtube        :  '',
            feed        :  '',
            friendfeed    :  '',
            digg        :  '',
            lastfm        :  '',
            center        : false,    
            inline        : true,
            small        : false,
            newPage        : false
        });
    

// EndOAWidget_Instance_2149023
    </script>
  </footer>
  <!-- InstanceEndEditable -->
  <!--container div ends-->
</div>

</body>


<!-- InstanceEnd --></html>
        
END_OF_HTML
[download]

Comment on New to this... CSS styles are not applied to the HTML within the PERL script. Please help! Download Code

Replies are listed 'Best First'.
Re: New to this... CSS styles are not applied to the HTML within the PERL script. Please help! by ww (Archbishop) on May 28, 2014 at 19:00 UTC
The issue is probably the location of your css file: With the script generating the html page running in cgi-bin, the link to your css needs to be: RELATIVE to the location of cgi-bin... or ABSOLUTE with reference to your web root PS: Unless FormMail at Matt's archive has been updated, it is rife with vulnerabilities, infelicitious code and the potential for other problems. Use nms (on SourceForge at nms-cgi.sourceforge.net/scripts.shtml) from London Perl Mongers instead. HTH Sometime idjits hav'ta edit multiple times to get capitalization, punctuation, etc. correct. This is an example. Quis custodiet ipsos custodes. Juvenal, Satires	[reply]
Re: New to this... CSS styles are not applied to the HTML within the PERL script. Please help! by gman (Friar) on May 28, 2014 at 18:56 UTC
This is not a Perl question, but your "styles.css" is not accessible from http://www.jbritten.co.uk/contact/styles.css so your `<link href="styles.css" ...>` needs to look something like `<link href="../styles.css" ...>` [download]	[reply] [d/l] [select]
Re: New to this... CSS styles are not applied to the HTML within the PERL script. Please help! by taint (Chaplain) on May 29, 2014 at 00:53 UTC
Greetings. While not specifically a Perl issue/problem. I can tell you, it's an ENCODING problem. Given this is a Perl forum. I'm going to suggest a few changes, and provide you with the cause. So you will hopefully refrain form doing it again. The Perl part (use this): `#!/usr/bin/perl use strict; use warnings; use feature qw(say); use Authen::Captcha; use CGI; # # # # # say qq~<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta http-equiv="content-type" content="text/html; charset=utf-8" + /> # # # # # THE FOLLOWING LINE IS YOUR PROBLEM (explained later) <link href=“styles.css" rel="stylesheet" type="text/css" media="screen +"> <!-- InstanceEnd --></html>~;` [download] OK. It is clear this is one of those COPY/PASTE problem, and perhaps you, or your editor need to be more alert. :) Seems you're boasting UTF-8, but you didn't notice you have an embedded character prefaced to style.css. If you had examined the source of your web page, in your browser. You probably would have seen it. What you'll need to do as a rule, is ensure the source you're working with is in the same encoding you're working with. For example, the source you're copying/opening is latin-1, and you paste into UTF-8 without paying attention. This is what you'll get (the problem you have). If you have a decent editor, you should have easily seen the embedded character. If it's a decent editor, maybe re-examine the settings. You should be able to convert from one encoding, or another, to one, or another, or better, just use, convert to, UTF-8. :) Best wishes. --Chris ¡λɐp ʇɑəɹ⅁ ɐ əʌɐɥ puɐ ʻꜱdləɥ ꜱᴉɥʇ ədoH	[reply] [d/l]
Re: New to this... CSS styles are not applied to the HTML within the PERL script. Please help! by Laurent_R (Canon) on May 29, 2014 at 14:29 UTC
Given the size of the code you are presenting, please put it within `<readmore>` and `</readmore>` tags.	[reply] [d/l] [select]