Hi

I'm building a freebie site for a client using 4.7 and the Burnt theme. http://www.traditionalmedicinescongress.com

Classic story...the banner image shows up fine for everyone in the cliebt group, except for one fellow running Netscape 8.0.4 and an unidentified version of IE on XP. It works fine on every browser I've tested it on and Netscape 8.0.4 and earlier appear to be the culprits. The background image doesn't show up and I've spent 5 hours trying to fix it. However, it appears to be beyond my CSS skills (or lack thereof).

Here's the CSS for the header.

/* HEADER ELEMENTS */
#header {
height: 90px;
background-image: url(images/banner.jpg);
background-position: 8px;
border-bottom: 1.5px solid #ccc;
margin: 4px;
margin-bottom: 10px;

Is there any fix that I might try? If using CSS for the header image is a problem, can I 'hard code' the image into the header somewhere (like page.tpl.php)?

I've searched CSS forums across the web, but haven't posted anywhere else yet. Please help, if you can. I'm at wits end.

Thanks.

Shayne

Comments

Tommy Sundstrom’s picture

You can try removing the space before the value. Instead of

height: 90px;

you write

height:90px;

This has been a problem with earlier versions of Netscape. (Actually I don't think this should be a problem with Netscape 8, but since you're desperate you could give it a try.)

shayne-1’s picture

Hey Tommy

Thanks for the suggestion. I tried it out, but it didn't work.

Funny thing...I just went to http://browser.netscape.com/ using NS 8.0.4 on XP and it doesn't even display Netscape's banner image....so I guess it's not the theme CSS. I just wish I knew how to add this banner using html/php. Back to the drawing board.

Thanks again mate.

Shayne

gonefishing’s picture

try this:
background-image:url("hello_world.gif");

or:
background-image:url("/images/banner.jpg");

shayne-1’s picture

Thanks gonefishing. It didn't work.

I've tried relative and absolute url combos with each of the following...

background-image:url("banner.jpg");

background-image:url("/images/banner.jpg");

I added the following to the page.tpl.php file. Now, it shows up in the html output between the header div tags, but not on the screen.

<?php print ("<img src=\"images/banner.jpg\" />")?>

I even tried a variation on the suggestion on this WordPress thread http://wordpress.org/support/topic/46172

...and put this between the head tags in page.tpl.php

<link rel="stylesheet" type="text/css" href="http://www.traditionalmedicinescongress.com/themes/burnt/style.css">

I tried this...in the same place....

<style type="text/css" media="all" href="http://www.traditionalmedicinescongress.com/themes/burnt/style.css"; </style>

and this...

<style type="text/css" media="all" href="http://www.traditionalmedicinescongress.com/misc/general.css" </style>
<style type="text/css" media="all" href="http://www.traditionalmedicinescongress.com/themes/burnt/style.css" </style>

I guess I have to keep coming back to the fact that Netscape's own banner does not show up in this browser.

Thanks for the suggestions.

Shayne

gonefishing’s picture

Can you see the background-image in the header of this site, drupal?
http://drupal.org/themes/bluebeach/header-back.png
http://drupal.org/themes/bluebeach/style.css
/* Header */
#header {
background: url(header-back.png) repeat-x 0% 0%;
height: 110px;
}

Added:
http://www.traditionalmedicinescongress.com/images/banner.jpg
I get "page not found" .

It is here though.
http://www.traditionalmedicinescongress.com/themes/burnt/images/banner.jpg

shayne-1’s picture

I really appreciate the assist gonefishing

The problem is not with Netscape 8.0.4 being unable to display the image when a direct URL is used, but rather when it is called through CSS as a background image.

You get "page not found" here http://www.traditionalmedicinescongress.com/images/banner.jpg, because the image is not located there. It's located in the themes folder, where the CSS is pointing to a relative sub-directory file [images/banner.jpg].

Illustrating further that this might not be the burnt theme CSS issue, per se, but a browser issue....when I view http://drupal.org using Netscape 8.0.4 (or its earlier 2 versions), I cannot see the banner image. HOWEVER, I can see it if I use the direct url http://drupal.org/themes/bluebeach/header-back.png And, as they say, therein lies the rub.

Any ideas as to how I can code this into my template as an image and not use the CSS to call it? I realize I'll lose the benefits of CSS caching, but....

Thanks again.

Shayne

dvessel’s picture

Yup, it's a known issue. Netscape thinks the relative links are relative to the page where the css gets linked from. The proper behavior is for any relative links be relative to the css file.

If you want to link directly into the page you can use this in your page.tpl.php file.

<img src="<?php print url($directory) ?>/images/yourbanner.jpg">

url($directory) points to your current theme directory.

-joon
www.dvessel.com

shayne-1’s picture

You are my guru joon. Thank you so much. The image now shows under 8.0.2 & 8.0.4.

Amazing!

Shayne

dvessel’s picture

No problem. ;) glad it worked out. Hang in there. I'm a noob myself. --in many ways.

-joon
www.dvessel.com