Combining CSS & CGI / Vertical Align CGI Output

[Ammoratti]

I've found a wonderful CGI FAQ script at http://www.smarterscripts.com/smartfaq .

However, I'm having some difficulty integrating this function with my site, and I hope someone here can help me out (Here's a
Demo Page (http://www.sirvera.org/faq.php) of the problem:


First, how do I apply an external css stylesheet to the text of the SmartFAQ cgi output? In particular, I'd like to change the text to conform to these parameters:

body {
font-family: verdana;
font-size: 1px; }

A:link { color:#002266; }
A:active { color:#C0C0C0; }
A:hover { color:#6C7B8B; text-decoration: none; }
A:visited { color:#002266; }


Secondly, I admit I broke down and used tables for layout design instead of CSS due to (of course) browser compatibility. At any rate, I wanted to embed the FAQ's cgi output into the "main content" cell of my layout table.

My first solution was to use of an IFRAME , 0 border, 100% width and height.

Internet Explorer automatically vertically aligns the text toward the top, but Firefox and Netscape aligns the text around the bottom half region of the page, adding an additional block of blank space beneath the question and answer entries.

I've tried adding STYLE="VALIGN:TOP;" in the IFRAME tag.
I then tried surrounding the IFRAME in my html with DIV tags (opening DIV containing the same style parameter).
I've also tried limiting the IFRAME height to 500, 400, 300 px, but with no success.

I do not mind an inline secondary vertical scroll bar, but I'd just like the text to be up near the top border of the cell/page...

Any Suggestions? =/

[Ammoratti]

I suppose I should post the main CGI script here as well. :P

----begin script-----


#!/usr/bin/perl

print "Content-type: text/html\n\n";
require "vars.cgi";
&parse;
$answer = $input{'answer'};
$id = $input{'id'};
$subject = $input{'subject'};
$cat = $input{'cat'};
$keywords = $input{'keywords'};
$match = $input{'match'};

if($answer && $answer =~ /[^0-9]/) { &error("Invalid Input."); }
if($subject && $subject =~ /[^0-9]/) { &error("Invalid Input."); }
if($cat && $cat =~ /[^0-9]/) { &error("Invalid Input."); }

open(DATA,"$header_file");
@head = <DATA>;
close(DATA);
open(DATA,"$footer_file");
@foot = <DATA>;
close(DATA);

if($answer) { &answer; }
if($subject || $cat) { &cat; }
if($keywords) { &search; }

open(DATA,"data/categories.txt");
@cats = <DATA>;
close(DATA);
@cats = sort @cats;

print @head;

foreach $line(@cats) {
chomp($line);
($category, $catid) = split(/&&/,$line);
$html = "<ul> <li><b><a href=\"smartfaq.cgi?cat=$catid\">$category</a></b></li> <ul>\n";
open(DATA,"data/$catid.cat");
@catlist = <DATA>;
close(DATA);
$count = 0;
foreach $line(@catlist) {
$count++;
($pos, $id) = split(/&&/,$line);
open(DATA,"data/$id.qa");
@entry = <DATA>;
close(DATA);
$entry = join('',@entry);
($question, $answer) = split(/\|/,$entry);
$html .= "<li type=\"circle\"><a href=\"smartfaq.cgi?answer=$id\">$question</a></li>\n";
}
$html .= "</ul></ul><p>\n";
if($count) { print $html; }
}
print qq|<p><center><small>Powered by <a href="http://www.smarterscripts.com/smartfaq" target="_blank">SmartFAQ</a></small></center>|;
print @foot;




sub answer {
open(DATA,"data/$answer.qa") || &error("Unable to locate FAQ entry file ($answer.qa)");
@content = <DATA>;
close(DATA);
$content = join('',@content);
($q, $a) = split(/\|/,$content);
print qq|
@head
<p>
<b>$q</b><p>
$a<p>|;

if($related_topics eq 1) {
print "<b>Related Topics:</b><br>\n";
open(DATA,"data/categories.txt");
@cats = <DATA>;
close(DATA);
@cats = sort @cats;
foreach $line(@cats) {
chomp($line);
($cat, $catid) = split(/&&/,$line);
open(DATA,"data/$catid.cat");
@catlist = <DATA>;
close(DATA);
$found = 0;
$count = 0;
foreach $line(@catlist) {
($pos, $qid) = split(/&&/,$line);
if($qid eq $answer) {
print qq|
<a href="smartfaq.cgi?cat=$catid">$cat</a><br>
|;
last;
}
}
}
} elsif($related_topics eq 2) {
%related = {};
$totalf = 0;
open(DATA,"data/categories.txt");
@cats = <DATA>;
close(DATA);
@cats = sort @cats;
foreach $line(@cats) {
chomp($line);
($cat, $catid) = split(/&&/,$line);
open(DATA,"data/$catid.cat");
@catlist = <DATA>;
close(DATA);
$found = 0;
$count = 0;
%related2 = {};
foreach $line(@catlist) {
($pos, $qid) = split(/&&/,$line);
if($qid eq $answer) {
$found = 1;
} else {
$related2{$qid} = 1;
}
}
if($found) {
foreach $key (keys %related2) {
$totalf++;
$related{$key} = 1;
}
}
}
if($totalf) {
print "<b>Related Topics:</b><br>\n";
foreach $key (keys %related) {
open(DATA,"data/$key.qa") || next;
@content = <DATA>;
close(DATA);
$content = join('',@content);
($q, $a) = split(/\|/,$content);
print qq|<a href="smartfaq.cgi?answer=$key">$q</a><br>|;
}
}
}

print qq|<p><center><small>Powered by <a href="http://www.smarterscripts.com/smartfaq" target="_blank">SmartFAQ</a></small></center>|;
print @foot;

if($log_count) { #log hit
open(DATA,"data/log.txt");
flock (DATA,2);
@log = <DATA>;
flock (DATA,8);
close(DATA);
$found = 0;
foreach $line(@log) {
chomp($line);
($num,$id) = split(/\t/,$line);
if($id eq $answer) {
$num++;
$found = 1;
push(@newlog,"$num\t$id\n");
} else {
push(@newlog,"$line\n");
}
}
if($found) {
@newlog = sort {$b <=> $a} @newlog;
open(DATA,">data/log.txt");
flock (DATA,2);
print DATA @newlog;
flock (DATA,8);
close(DATA);
} else {
open(DATA,">>data/log.txt");
flock (DATA,2);
print DATA "1\t$answer\n";
flock (DATA,8);
close(DATA);
}
}

exit;
}

sub cat {
open(DATA,"data/$cat.cat");
@catlist = <DATA>;
close(DATA);
$cnum = @catlist;
if(!$cnum) { &error("There are currently no entries in this category of the FAQ."); }

open(DATA,"data/categories.txt");
@cats = <DATA>;
close(DATA);
@cats = sort @cats;
foreach $line(@cats) {
chomp($line);
($category, $id) = split(/&&/,$line);
if($id eq $cat) {
$catname = $category;
last;
}
}

#$sa = 0;
#$newcat = $catname;
#@catsep2 = split(/\//,$newcat);
#@catsep2 = reverse @catsep2;
#while($newcat ne "" && $sa < 50) {
#@catsep = split(/\//,$newcat);
#@catsep = reverse @catsep;
#delete $catsep[0];
#@catsep = reverse @catsep;
#$newcat = join('/',@catsep);
#chop($newcat);
# foreach $line(@cats) {
# chomp($line);
# ($category, $id) = split(/&&/,$line);
# if($category eq $newcat) {
# @cat3 = split(/\//,$category);
# @cat3 = reverse @cat3;
# push(@newcatlist,"$cat3[0]&&$id");
# last;
# }
# }
#$sa++;
#}
#@newcatlist = reverse @newcatlist;
#push(@newcatlist,$catsep2[0]);
#
#foreach $line(@newcatlist) {
#($category, $id) = split(/&&/,$line);
# if($id) {
# $cathtml .= "<a href=\"smartfaq.cgi?cat=$id\">$category</a> / ";
# } else {
# $cathtml .= "<b>$category</b>";
# }
#}


print qq|
@head
<p>
<big>$catname</big><p>
|;

if($layout eq 1) {
print "<ul>\n";
foreach $line(@catlist) {
($pos, $qid) = split(/&&/,$line);
open(DATA,"data/$qid.qa");
@$qid = <DATA>;
close(DATA);
$entry = join('',@$qid);
($question, $answer) = split(/\|/,$entry);
print "<li><a href=\"#$qid\">$question</a></li>\n";
}
print "</ul><br><br>\n";
foreach $line(@catlist) {
($pos, $qid) = split(/&&/,$line);
$entry = join('',@$qid);
($question, $answer) = split(/\|/,$entry);
print "<a name=\"$qid\"></a><b>$question</b><br>$answer<p>\n";
}
} elsif($layout eq 2) {
foreach $line(@catlist) {
($pos, $qid) = split(/&&/,$line);
open(DATA,"data/$qid.qa");
@entry = <DATA>;
close(DATA);
$entry = join('',@entry);
($question, $answer) = split(/\|/,$entry);
print "<b>$question</b><br>$answer<p>\n";
}
} else {
print "<ul>\n";
foreach $line(@catlist) {
($pos, $qid) = split(/&&/,$line);
open(DATA,"data/$qid.qa");
@entry = <DATA>;
close(DATA);
$entry = join('',@entry);
($question, $answer) = split(/\|/,$entry);
print "<li><a href=\"smartfaq.cgi?answer=$qid\">$question</a></li>\n";
}
print "</ul>\n";
}

print qq|<p><center><small>Powered by <a href="http://www.smarterscripts.com/smartfaq" target="_blank">SmartFAQ</a></small></center>|;
print @foot;

exit;
}


sub search {
%matches = {};
@key = split(/ /,$keywords);
open(DATA,"data/categories.txt");
@cats = <DATA>;
close(DATA);
@cats = sort @cats;

print @head;
print qq|<big>Search results for <b>$keywords</b></big>:
<p>
|;

foreach $line(@cats) {
chomp($line);
($category, $catid) = split(/&&/,$line);
open(DATA,"data/$catid.cat");
@catlist = <DATA>;
close(DATA);
foreach $line(@catlist) {
($pos, $id) = split(/&&/,$line);
open(DATA,"data/$id.qa");
@$id = <DATA>;
close(DATA);
$entry = join('',@$id);
($question, $answer) = split(/\|/,$entry);
$found = 0;
$fcount = 0;
if($match eq "any") {
foreach $key(@key) {
$q = $question;
$q =~ s/.*?$key.*?/$fcount++/eig;
$a = $answer;
$a =~ s/.*?$key.*?/$fcount++/eig;
if($question =~ /$key/i || $answer =~ /$key/i) { $found = 1; }
}
} else {
$words = @key;
$count = 0;
foreach $key(@key) {
$q = $question;
$q =~ s/.*?$key.*?/$fcount++/eig;
$a = $answer;
$a =~ s/.*?$key.*?/$fcount++/eig;
if($question =~ /$key/i || $answer =~ /$key/i) { $count++; }
}
if($count >= $words) { $found = 1; }
}
if($found) {
$matches{$id} = $fcount;
}
}
}

$total = 0;
foreach $key (keys %matches) {
if($matches{$key}) { $total++; push(@matches,"$matches{$key}\t$key"); }
}

if($total) {
print "<ul>\n";
@matches = reverse sort { $a <=> $b } @matches;
foreach $line(@matches) {
($num,$id) = split(/\t/,$line);
$entry = join('',@$id);
($question, $answer) = split(/\|/,$entry);
foreach $key(@key) {
$question =~ s/$key/<b>$key<\/b>/ig;
}
print "<li><a href=\"smartfaq.cgi?answer=$id\">$question</a></li>\n";
}
print "</ul><p><small>Results Found: $total</small>\n";
} else {
print "No results found.\n";
}

print qq|<p><center><small>Powered by <a href="http://www.smarterscripts.com/smartfaq" target="_blank">SmartFAQ</a></small></center>|;
print @foot;
exit;
}

---end script---

[mlseim]

It looks like they have a header file and a footer file.

Find those and inside the header file, reference your style sheet.
The path will be from where the script is located to your style sheet.

[mlseim]

and this is not a valid property:

<div style="valign=top;">

Within your CSS file, you'll define the styles for the <iframe>
maybe something like this:

#iframe {
background-color: #ffffff;
font-family: "Verdana", "MS Sans Serif", Geneva, sans-serif;
font-weight: normal;
font-size: 12pt;
margin: 0px auto;
padding: 20px 40px 20px 40px;
width: 575px;
height: 450px;
color: #3f3f3f;
scrollbar-base-color: #e0e0e0;
border: 1px solid #e0e0e0;
text-align: justify;
overflow : auto;
}

And then you'll have your <iframe> within a div:

<div>
<iframe ..... >
</div>

Note in the #iframe style, the width and height is specified and make it
the same as your <iframe>. Also, the overflow and scroll-bar color
specified (scrollbar-base-color is IE only).

EDIT:
I need to clarify this ... the STYLE is applied to the CSS that appears in
the page you're displaying in the <iframe>, not the page that the <iframe>
is placed ... does that make sense?

I'm not good at explaining it.

[Ammoratti]

OF COURSE!!!!!

I haven't tried that yet... There... worked like a charm!
A little tweaking of the elements, and it should be good to go... Thanks!!

[mlseim]

This line:

<img src="blank.gif" width="1" height="500" align="right">

is causing the problem with Firefox ... pushing the <iframe> down the page.

If you view your page and do "edit", "select all", you'll see it highlight that
blank.gif image. It acts differently with IE than Firefox.

You mentioned using tables because of browser issues?

Get rid of the tables anyhow. You'll end up with more problems, such as
the "blank.gif" image issue that you already have.

Some might scoff as using <iframes> too, but keep that for now. The
alternative would be to use an "include", which would require your page
to be .shtml or .php ... it's working for you and looks OK.

[Ammoratti]

Ah, yes.... I've gotten rid of the IFRAME altogether.
Your advice has been very helpful; thank you!