template graphics not displaying - cgi

[horseshrink]

Just changed over to CGI from PHP due to webhost memory utilization problems. Everything is re-indexed and lives in cgi_bin. Search function works well ... except one nagging detail.

www.lindseywilliams.org (Click "Search Lin's Website" in left frame, or use the search box in the top frame.)

The graphics in my "search_template.html" refuse to display. I've checked/double/triple checked to make sure they're linked correctly (using DW CS4.)

The Zoom Indexer Icon and the CSS body background no longer show.

* * *
body {
background-image: url(pix/Lin-Background-1.gif);
background-repeat: repeat-y;
border: 3px solid #A0ADA0;
}

* * *
<p align="center"><a href="http://www.wrensoft.com/zoom/" target="_blank"><img src="pix/Zoom_icon66x33x16.gif" alt="Zoom Indexer Icon" width="64" height="33" border="5" align="absmiddle"></a></p>

I've figured this might be related to permissions, so I liberalized these to 755 for the few involved files and "pix" subdirectory. No joy.

Couldn't find an answer after searching the forums. I'm betting I'm missing something really obvious, but those tend to be the easiest things for me to miss.

[David]

Either
- The path wrong
or
- Your server doesn't allow serving of image files from the CGI-BIN folder.

So try moving the pix folder to the web site root, and change the code to point to the new folder. e.g.
background-image: url(/pix/Lin-Background-1.gif);

[horseshrink]

location

The graphics files were originally in my main website graphics directory, "www/pix" with "www" being at same directory level as "cgi-bin". Since that wasn't working, I moved them into "cgi-bin/Zoom_Search." After that didn't work, I moved one file around, changing the link, to see if location would solve the problem. So far, no success.

[Ray]

This is really a CSS and HTML design issue.

You need to understand that the paths used in CSS are relative to the location of the CSS code. You might also be further confused due to the fact that you have the search page rendering in a frame and the URL and location is a little obscured.

Your CGI search function is here:
http://www.lindseywilliams.org/cgi-bin/Zoom_Search/search.cgi

This loads within a frame normally, when accessed from the main page of your site. But it doesn't change the fact that the file paths returned by this page (and the search_template.html) will be relative to this URL.

You have the following in the CSS code inside your "search_template.html" file:

background-image: url(pix/Lin-Background-1.gif);

This means that you are telling the browser to look for the background image at this location:
http://www.lindseywilliams.org/cgi-bin/Zoom_Search/pix/Lin-Background-1.gif

Going to the above URL, it is evident that this is not the correct location for the image file. You probably do not actually have the file there, for one. Second (as pointed out in the above post already), it is likely your server does not allow the serving of image files from the "cgi-bin" folder (default behaviour for Apache servers) which is why going to the above URL returns an "Internal Server Error" instead of a "File Not Found".

Given this, it is much more likely you would want to host the image files at a location such as the following:
http://www.lindseywilliams.org/pix/Lin-Background-1.gif

And going to that URL, I can see that you actually have the file there.

Given that this is the location of the file, then you really should change your CSS to something like this:

background-image: url([B]/[/B]pix/Lin-Background-1.gif);

Note the extra slash at the front of the path to indicate that it is at the root level. If you do not understand this, you need to reference a primer on absolute and relative paths.

Looking back, all of the above were pointed out in the previous post by Wrensoft already, but hopefully this time it's clear.

[horseshrink]

Thank you for continuing to try to help.

Unfortunately, what you are suggesting for a link reconfiguration and .gif files location is where I had started in the first place. As part of troubleshooting, I had moved the graphics files into the cgi-bin directory.

However, I might have flubbed something unwittingly, so I re-established the code and file locations as you recommended.

I've wiped the slate clean, deleting the files in my the webhost and local "cgi/Zoom_Search" directories, and re-indexed/reloaded everything.

Below are salient lines from the template file.

background-image: url(../../www/pix/Lin-Background-1.gif);

<p align="center"><a href="http://www.wrensoft.com/zoom/" target="_blank"><img src="../../www/pix/Zoom_icon66x33x16.gif" alt="Zoom Indexer Icon" width="64" height="33" border="5" align="middle"></a></p>

Still get a functional search results page with everything --- except "Lin-Background-1.gif" and "Zoom_icon66x33x16.gif." (The Internal Server Error you noted was during my mucking about and changing the files today.)

The files in the "cgi/Zoom_Search" directory are all 755. I also 755'ed "Lin-Background-1.gif" and "Zoom_icon66x33x16.gif" in the www/pix directory for good measure after making doubly sure they were properly uploaded in binary mode.

After making all these changes and running through the search function a number of times in Firefox and IE8, the webhost's CGI Error reporting service notes "No entries found in your CGI Script Error Log."

Additional thoughts?

[Ray]

I'm pretty sure what I suggested above will work and would still work if you followed it. You're doing something all together different from what we recommended, and I'm not sure why.

First of all, your new paths involving "../../www/" won't work, and are just plain wrong. Remember that paths in your CSS and HTML are processed by your browser. From your browser's point of view, there is no "www" folder, even though that may be how the files are hosted on the web server itself.

Your current CSS and HTML are asking the browser to retrieve the image files from the following locations:
http://www.lindseywilliams.org/www/pix/Lin-Background-1.gif
http://www.lindseywilliams.org/www/pix/Zoom_icon66x33x16.gif

If you go to the above URL's, it is quite clear why the browser is unable to show anything because the files aren't there.

Again, if you just used the suggested CSS in my last post, it will work. It is not what you started with at the top of this thread. Note again, the extra slash in the front of the path.

[horseshrink]

Well ... I have the meager satisfaction of being partly right initially.
I was "missing something really obvious."

I didn't read what you wrote closely enough and am chagrined by the URL snafu. I've been content to let DW do my URL thinking, fostering a lingering blind spot.

Fix made and everything works now.

Thank you for your patience.

[Ray]

No problem, and glad it's worked out. Paths can be tricky and they sneak up on you.

Thanks for the little logo link to us, by the way.