Pico Search & CSS not working together [Archive]

bjensen

12-08-2004, 06:23 PM

Hi! We had a template created for us and they used css to develop the entire site. For our search engine we are using Pico search and their specific code. This combination works great on a test server 'Brinkster' but when uploaded to our own server we cannot see the search field at all. BUT, when I remove the line of code linking to the css sheet I can see the search field just fine, but then of course we lose all the graphics and text because the site requires the css.

I have contacted Pico and they state that because the code is standard html the problem is very well the css. I don't understand why the css and pico code works on one server but not the other. Is there some object required on our server to meet the needs of this combination? Our tech does not know the answer.

Below is the code. Do I need to manipulate it somehow?

Your help is greatly appreciated.

Barbara J


<P>
<FORM METHOD="POST" ACTION="http://www.picosearch.com/cgi-bin/ts.pl">
<INPUT TYPE="HIDDEN" NAME="index" VALUE="00000">
<table bgcolor="#999999" cellspacing="0" cellpadding="0" border="0">
<tr>
<td></td>
<td><input type="text" name="query" value="" size="18" /></td>
<td><nobr>
<input name="Search " type="image" id="Search " src="/images/search_arrow.jpg" alt="Search" width="20" height="22" border="0" />
</nobr></td>
</tr>
</table>
</FORM>

chilipie

12-08-2004, 06:55 PM

Where is the code linking to the CSS file?

Remember all tags should be in lower-case.

bjensen

12-08-2004, 07:04 PM

Hi! Below is the code that includes the link to the css sheet and down to the Pico code.

---------------------------

<title> Home</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="css/style.css"></link>

<script type="text/javascript" src="includes/browser.js">

/***********************************************
* Jim's DHTML Menu v5.7- © Jim Salyer (jsalyer@REMOVETHISmchsi.com)
* Visit Dynamic Drive: http://www.dynamicdrive.com for script and instructions
* This notice must stay intact for use
***********************************************/
</script>
<script language="JavaScript" src="detect.js"></script>
<script language="JavaScript" src="subnav.js"></script>
</head>
<body onload="init()" onResize="init()">
<div id="container">


<div id="topNavigation"><img src="images/nav_search.jpg" width="760" height="46" alt="" /></div>

<div id="secondaryMainNav"><div id="search">
<P>
<FORM METHOD="POST" ACTION="http://www.picosearch.com/cgi-bin/ts.pl">
<INPUT TYPE="HIDDEN" NAME="index" VALUE="00000">
<table bgcolor="#999999" cellspacing="0" cellpadding="0" border="0">
<tr>
<td></td>
<td><input type="text" name="query" value="" size="18" /></td>
<td><nobr>
<input name="Search " type="image" id="Search " src="/images/search_arrow.jpg" alt="Search" width="20" height="22" border="0" />
</nobr></td>
</tr>
</table>
</FORM>

</div>

chilipie

12-08-2004, 07:08 PM

Add a Doctype, and then try...

<link rel="stylesheet" type="text/css" href="css/style.css" />

bjensen

12-08-2004, 07:25 PM

Thanks for your help. I have the below doctype included (I forgot to post it with the rest of my code) and tried your replacement code and still nothing works. I wonder if I may have to enquire about permanently hosting our site on an outside server. Is it the code or the internal server not handling it?

I appreciate your assistance.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

hemebond

12-08-2004, 08:04 PM

We need to see the CSS.
<form method="post" action="http://www.picosearch.com/cgi-bin/ts.pl">
<input name="index" type="hidden" value="00000">
<input name="query" type="text" value="" size="18">
<input name="search" type="image" src="/images/search_arrow.jpg" alt="Search">
</form>

bjensen

12-08-2004, 08:22 PM

Here it is...

/* CSS Document */

body {
margin: 0px;
padding: 0px;
color: #000;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;

}

#container {
width: 760px;
\width: 760px;
w\idth: 760px;
padding: 0;
background-image: url(../images/bg_.gif);
background-repeat: repeat-y;
margin-left: auto;
margin-right: auto;
}

/*
---------------------
MAIN NAV
---------------------
*/
#topNavigation {
padding: 0px;
margin: 0px 0px 0px 0px;
height: 46px;
left: 0px;
top: 0px;
background-image: url(../images/bg_mainNav.jpg);
background-repeat: repeat-x;
}

/*
---------------------
SIDEBAR-A
---------------------
*/
#sidebar-a {
float: left;
width: 238px;
\width: 238px;
w\idth: 238px;
margin: 0;
margin-right: 0;
padding: 0;
}
#sidebar-aboutUs {
background-image: url(../images/bg_left_blue.gif);
background-repeat: repeat;
padding-left: 14px;
padding-bottom: 30px;
}

#sidebar-fastFind{
background-image: url(../images/bg_left_green.gif);
background-repeat: repeat;margin: 0px;
padding: 0px;
height: auto;
}

#sidebar-fastFind-header {
background-image: url(../images/blueHeader.gif);
background-repeat: no-repeat;
padding-left: 14px;
margin: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
height: 24px;
}

#sidebar-fastFind-Content {
font-family: Arial, Helvetica, sans-serif;
font-size: 0.7em;
color: #000;
margin: 0px;
padding-left: 14px;
padding-top: 14px;
padding-right: 0px;
padding-bottom: 30px;
font-style: normal;
font-variant: normal;
font-weight: normal;
line-height: 1.8em;
}

#sidebar-fastFind-Content a {
text-decoration: none;
color: #000000;
}

#sidebar-fastFind-Content a:hover {
text-decoration: underline;
color: #000000;
}

#sidebar-contents {
background-image: url(../images/bg_left_blue.gif);
background-repeat: repeat;margin: 0px;
padding: 0px;
height: auto;
}

#sidebar-contents-header {
background-image: url(../images/bg_left_blue.gif);
background-repeat: repeat;
padding-left: 14px;
padding-bottom: 14px;
}

#sidebar-contents-content {
font-family: Arial, Helvetica, sans-serif;
font-size: 0.7em;
color: #FFF;
margin: 0px;
padding-left: 14px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 30px;
font-style: normal;
font-variant: normal;
font-weight: normal;
line-height: 1.8em;
}

#sidebar-contents-content a {
text-decoration: none;
color: #FFF;
}

#sidebar-contents-content a:hover {
text-decoration: underline;
}

ul.contents {
/*list-style: disc inside;*/
margin: 0px;
padding: 0px 0px 0px 8px;
line-height: 1.75;
color: #FFFFFF;
list-style-type: none;
}

#sidebar-calendar{
background-image: url(../images/bg_left_green.gif);
background-repeat: repeat;margin: 0px;
padding: 0px;
height: auto;
}

#sidebar-calendar-header {
background-image: url(../images/greenHeader.gif);
background-repeat: no-repeat;
padding-left: 14px;
margin: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
height: 24px;
}

#sidebar-calendar-content {
font-size: 1em;
color: #000;
margin: 0px;
padding-left: 14px;
padding-top: 14px;
padding-right: 14px;
padding-bottom: 30px;
font-style: normal;
font-variant: normal;
font-weight: normal;
line-height: 1.8em;
}

#sidebar-calendar td, #sidebar-calendar th{
font-family: Arial, Helvetica, sans-serif;
font-size: 0.8em;
color: #000;
font-style: normal;
font-variant: normal;
font-weight: normal;
text-align: center;
line-height: 1.8em;
}

p.sidebar-calendar a, .calendarBar {
font-family: Arial, Helvetica, sans-serif;
font-size: 0.8em;
color: #1A624A;
padding: 0px;
margin: 0px;
font-style: normal;
font-variant: normal;
font-weight: normal;
line-height: normal;
text-decoration: none;
}

p.sidebar-calendar a:hover {
text-decoration: underline;
}

.sidebar-aboutUs {
font-family: Arial, Helvetica, sans-serif;
font-size: 0.9em;
color: #FFFFFF;
margin: 0px;
padding: 0px 14px 0px 0px;
font-style: normal;
font-variant: normal;
font-weight: normal;
position: relative;
top: 14px;
}

.sidebar-contents {
font-family: Arial, Helvetica, sans-serif;
font-size: 0.9em;
color: #FFFFFF;
margin: 0px;
padding: 0px 14px 0px 0px;
font-style: normal;
font-variant: normal;
font-weight: normal;
position: relative;
top: 14px;
}

#sidebar-poll{
background-image: url(../images/bg_left_green.gif);
background-repeat: repeat;margin: 0px;
padding: 0px;
height: auto;
}

#sidebar-poll-Header-green {
background-image: url(../images/greenHeader.gif);
background-repeat: no-repeat;
padding-left: 14px;
margin: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
height: auto;
}
#sidebar-poll-Header-blue {
background-image: url(../images/blueHeader.gif);
background-repeat: no-repeat;
padding-left: 14px;
margin: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
height: auto;
}
/*
---------------------
MAIN CONTENT AREA
---------------------
*/
#contentContainer {
float: left;
width: 522px;
\width: 522px;
w\idth: 522px;
padding: 0;
margin: 0;
}

#contentHeader {
background-image: url(../images/contentHeader.jpg);
background-repeat: no-repeat;
padding: 0;
margin: 0;
height: 39px;
}

#content {
float: left;
width: 317px;
\width: 331px;
w\idth: 317px;
padding: 5px 0 0 14px;
margin: 0 0 20px;
}

#contentContainerDoc {
float: left;
width: 522px;
\width: 522px;
w\idth: 522px;
padding: 0;
margin: 0;
}

#contentDoc {
float: left;
width: 494px;
\width: 522px;
w\idth: 494px;
padding: 5px 0 0 14px;
margin: 0 0 0px;
}

#date {
position: relative;
top: 5px;
left: -14px;
text-align: right;
font-size: 0.65em;
color: #000000;
visibility: hidden;

}

#navPath {
clear:both;
font-size: 0.9em;
font-style: normal;
font-variant: normal;
font-weight: normal;
padding-right: 14px;
position: relative;
left: 14px;
top: 5px;

}
#navPathBottom {
clear:both;
width: 500px;
\width: 500px;
w\idth: 500px;
font-size: 0.9em;
font-style: normal;
font-variant: normal;
font-weight: normal;
padding-right: 14px;
position: relative;
left: 252px;
top: 5px;
}
#navPath a, navPathBottom a {
text-decoration: none;
}

#navPath a:hover, navPathBottom a:hover {
text-decoration: underline;
}

a.author {
color: #5378AC;
}

a.docBotInfo {
color: #5378AC;
}

#docBottomInfoContainer {
width: 494px;
\width: 522px;
w\idth: 494px;
margin: 0;
padding: 0;
}

#docBottomInfoRight {
float: right;
width: 240px;
\width: 240px;
w\idth: 240px;
padding: 0;
margin: 0;
}

#docBottomInfoLeft {
float: left;
width: 240px;
\width: 240px;
w\idth: 240px;
margin: 0;
padding: 0;
}

/* second column */
#sidebar-b {
float: right;
width: 177px;
\width: 191px;
w\idth: 177px;
margin: 0;
padding: 26px 0px 0px 14px;
}

#contentAd {
width: 163px;
\width: 163px;
w\idth: 163px;
margin-top: 22px;
padding: 0;
}

#ad_thePegg {
height: 217px;
background-image: url(../images/ad_thePegg.jpg);
padding: 0;
margin: 0;
background-repeat: no-repeat;
}

#docImage {
float:right;
width: 149px;
padding-left: 20px;
font-size: 0.7em;
font-style: normal;
font-variant: normal;
font-weight: normal;
text-align: center;
padding-top: 20px;
}

/*
---------------------
FOOTER
---------------------
*/
#footer {
clear: both;
padding: 0 0 0 14px;
background-image: url(../images/fpo_footer.jpg);
height: 88px;
background-repeat: no-repeat;
margin: 0px;
}

#contactEdmonton {
float: left;
margin: 0px;
padding: 6px 0px 0px;
}

#contactCalgary {
float: right;
margin: 0px;
padding: 6px 10px 0px 0px;
}

.contactLinks {
margin: 0px;
padding-top: 50px;
}

.contactCity {
font-family: Arial, Helvetica, sans-serif;
font-size: 0.7em;
font-style: normal;
font-variant: normal;
font-weight: bold;
}

.contactTel {
font-family: Arial, Helvetica, sans-serif;
font-size: 0.7em;
font-style: normal;
font-variant: normal;
font-weight: bold;
color: #173679;
}

.contactLinks a, .contactCalgary a, .contactBar{
font-family: Arial, Helvetica, sans-serif;
font-size: 0.7em;
font-style: normal;
font-variant: normal;
font-weight: bold;
color: #696969;
}

#footerCopyright {
text-align: right;
width: 746px;
\width: 760px;
w\idth: 746px;
margin-right: 14px;
background-color: #FFFFFF;
font-size: 0.7em;
color: #696969;
padding-bottom: 40px;
}

/*
---------------------
OTHER STYLES
---------------------
*/
/* Table */
td.select {
background-color: #96B6AB;
}

td.today {
background-color: #1C614C;
color: #FFFFFF;
}

table.form {
font-size: 0.8em;
}

/* Image Styles */
img.hr {
margin: 0px;
padding: 5px 0px;
}

div.hr {
height: 1px;
background: #fff url(../images/hr.gif) repeat-x scroll center;
padding-left:0;
padding-right:0;
padding-top: 4px;
padding-bottom: 10px;
}

div.hr hr {
display: none;
}

img.go {
margin: 0px;
padding: 0px;
top: 4px;
position: relative;
}
img.toc{
padding-bottom: 14px;
padding-left: 14px;
}

/* Form Styles */
form {
padding: 0px 0px 10px;
margin: 0px;
}

/* Anchor Styles */
a {
color: #000000;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}

/* HTML Header Styles */
h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 0.95em;
text-transform: uppercase;
color: #FFFFFF;
margin: 0;
padding: 0 0 18px;
font-style: normal;
font-variant: normal;
font-weight: bold;
position: relative;
top: 18px;
visibility: visible;

}

h1.noSpace {
font-family: Arial, Helvetica, sans-serif;
font-size: 0.95em;
text-transform: uppercase;
color: #FFFFFF;
margin: 0;
padding: 0;
font-style: normal;
font-variant: normal;
font-weight: bold;
line-height: normal;
position: relative;
top: 3px;
visibility: visible;

}
h1.poll {
font-size: 0.95em;
text-transform: uppercase;
color: #FFFFFF;
margin: 0;
padding: 0 0 20px;
font-style: normal;
font-variant: normal;
font-weight: bold;
line-height: normal;
position: relative;
top: 3px;
}
h1.moveLeft {
font-family: Arial, Helvetica, sans-serif;
font-size: 0.95em;
text-transform: uppercase;
color: #FFFFFF;
margin: 0;
padding: 0;
font-style: normal;
font-variant: normal;
font-weight: bold;
position: relative;
left: 14px;
top: 18px;
visibility: visible;

}

h1.contactUs {
font-family: Arial, Helvetica, sans-serif;
font-size: 0.95em;
text-transform: uppercase;
color: #FFFFFF;
margin: 0;
padding: 0px 0 25px;
font-style: normal;
font-variant: normal;
font-weight: bold;
position: relative;
top: 18px;
}

h2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
font-style: normal;
font-variant: normal;
font-weight: bold;
text-transform: uppercase;
color: #000;
margin: 0px;
padding: 18px 0px 0px;
}

h3 {
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
font-style: normal;
font-variant: normal;
font-weight: normal;
text-transform: uppercase;
color: #5378AC;
margin: 0px;
padding: 10px 0px 0px;
}

h4 {
font-family: Arial, Helvetica, sans-serif;
font-size: 0.9em;
font-style: normal;
font-variant: normal;
font-weight: normal;
text-transform: uppercase;
color: #5378AC;
margin: 0;
padding: 0;
}

/* P Styles */
p {
font-family: Arial, Helvetica, sans-serif;
font-size: 0.7em;
font-style: normal;
font-variant: normal;
font-weight: normal;
margin: 0px;
padding: 0px 0px 10px;
}

p.ad_thePeggContent {
font-family: Arial, Helvetica, sans-serif;
font-size: 0.65em;
width: 145px;
color: #000;
padding: 0;
margin: 0;
font-style: normal;
font-variant: normal;
font-weight: normal;
line-height: normal;
position: relative;
top: 98px;
left: 10px;
}

p.featuredLink, p.featuredLink a{
color: #5378AC;
text-decoration: none;
}

p.featuredLink a:hover{
text-decoration: underline;
}

p.whatsNewLink a{
color: #5378AC;
text-decoration: none;
}

p.whatsNewLink a:hover{
text-decoration: underline;
}

p.pullQuote {
background-image: url(../images/p_pullQuote.gif);
background-repeat: no-repeat;
font-size: 1.0em;
font-style: normal;
font-variant: normal;
font-weight: normal;
color: #8DA6C5;
margin: 1.5em 0 0;
padding: 0 0 1em 18px;
line-height: 1.5em;
}

p.arrowRight {
background-image: url(../images/arrowRight.gif);
background-repeat: no-repeat;
font-size: 0.75em;
font-style: normal;
font-variant: normal;
font-weight: normal;
color: #8DA6C5;
margin: 0;
padding: 3px 0 0 23px;
height: 25px;
clear: both;
}

p.ico_pdf {
background-image: url(../images/ico_pdf.gif);
background-repeat: no-repeat;
font-size: 0.75em;
font-style: normal;
font-variant: normal;
font-weight: normal;
color: #8DA6C5;
margin: 0;
padding: 3px 0 0 23px;
height: 25px;
}

p.ico_doc {
background-image: url(../images/ico_doc.gif);
background-repeat: no-repeat;
font-size: 0.75em;
font-style: normal;
font-variant: normal;
font-weight: normal;
color: #8DA6C5;
margin: 0;
padding: 3px 0 0 23px;
height: 25px;
}

p.arrowRightCopyInfo {
font-size: 0.7em;
font-style: normal;
font-variant: normal;
font-weight: normal;
margin: 0;
color:#000000;
padding: 0 0 0.3em 23px;

}
.arrowRightCopyInfoTOC {
font-size: 0.9em;
font-style: normal;
font-variant: normal;
font-weight: normal;
margin: 0;
padding: 0;
color:#000000;
}
p.arrowRightCopyLink {
/*font-size: 0.8em;*/
margin: 0;
padding: 0 0 1.5em 23px;
}

p.pollTitle {
font-size: 0.7em;
}

p.pollSummaryText {
font-size: 0.85em;
color: #1A624A;
font-weight:bold;
padding-right: 14px;
}
.clearFont {
font-size: 100%;
}
.pollQuestion {
font-size: 0.75em;
font-style:italic;
padding-right: 14px;
margin: 0px;
padding-top: 0px;
}
p.pollRange {
font-size: 0.6em;
color: #1A624A;
font-weight:bold;
padding-right: 14px;
margin: 0;
padding:0;
}

p.pollView {
font-size: 0.6em;
color: #1A624A;
font-weight:bold;
margin: 0;
padding:0 14px 3.2em 0;
}

p.pollRangeBlack {
color:#000;
font-size: 0.7em;
font-style: italic;
font-weight: normal;
margin: 0;
padding:0 0 0.8em;
}
.red {
color:#FF0000;
}

p.noSpace {
margin: 0px;
padding: 0px;
}
p.formSmall {
font-size: 0.7em;
color:#696969;
}

p.formHeading {
font-size: 1.3em;
font-style: normal;
font-variant: normal;
font-weight: normal;
color: #5378AC;
margin: 0;
padding: 20px 0 0;
}
.formHeadingSm {
font-size: 0.6em;
font-style: normal;
font-variant: normal;
font-weight: normal;
color: #5378AC;
margin: 0px;
padding: 10px 0px 0px;
}

/*
---------------------
SEARCH
---------------------
*/
#search {
margin: 0;
margin-top: -3px;
margin-right: -28px;
padding:0;
position:relative;
top:0px;
left: 0px;
width: 200px;
float: right;
visibility: hidden;

}

/*
Secondary Navigation
(ie: HOME | ABOUT APEGGA | REGULATORY AFFAIRS | CONTACT US)
*/
#secondaryMainNav {
padding: 0;
margin: 0;
height: 146px;
background-image: url(../images/fpo_header.jpg);
background-repeat: no-repeat;
}
#secondaryMainNav a {
color: #FFF;
}

#secondaryMainNav a:hover {
color: #FFF;
}
/* span for spacing*/
p.secondaryMainNavSpan {
padding-left: 10px;
padding-top: 5px;
font-size: 0.7em;
font-weight: bold;
font-style: normal;
font-variant: normal;
color: #FFFFFF;
}

#dropmenudiv{
position:absolute;
font-size: 0.7em;
line-height:1.75;
z-index:100;
padding: 10px;
margin-left: -10px;
}

#dropmenudiv a{
color: white;
}

bjensen

12-09-2004, 05:34 PM

Hi! I've been working on this problem and my inexperience with css is holding me back.

What I discovered was if I got rid of the div tags surrounding the pico code search form the form field would be viewable. But, by removing the div code it also messed up my top navigation. So, the div code is needed. How do I fix this coding so that it won't hide the form field?

<div id="search">


<P>
<FORM METHOD="POST" ACTION="http://www.picosearch.com/cgi-bin/ts.pl">
<INPUT TYPE="HIDDEN" NAME="index" VALUE="65251">
<table bgcolor="#999999" cellspacing="0" cellpadding="0" border="0">
<tr>
<td></td>
<td><input type="text" name="query" value="" size="18" /></td>
<td><nobr>
<input name="Search " type="image" id="Search " src="/images/search_arrow.jpg" alt="Search" width="20" height="22" border="0" />
</nobr></td>
</tr>
</table>
</FORM>


</div>

mcdougals4all

12-09-2004, 05:58 PM

The style rules for the #search div include visibility:hidden; which is why the form is not appearing when enclosed in the div. Remove this rule.

Your css could be cut down in size pretty substantially, here's a good tutorial on css selectors and shorthand (http://css.maxdesign.com.au/selectutorial/).

Also, please enclose code in [code] tags.

bjensen

12-09-2004, 06:04 PM

One more question. Our server is IIS 5, would having WINDOWS 2003 IIS 6 make the difference?

bjensen

12-09-2004, 07:05 PM

Thank you .... thank you!! Worked like a charm! :)