Images not showing up in Firefox unless I use the full address

HTML & CSS
1

I know this sounds stupid, and I’m probably missing something important, but my images won’t show up in Firefox.

Just as an example from my WordPress theme that I’m working on (I can’t provide a link to the page because it’s password protected):

<div id="LeftHeaderColumn">
                <img id="Logo" src="http://akashicarchives.netcomstudios.com/wp-content/themes/akashicarchives/images/logo.gif" alt="Akashic Archives Logo" />
                <div id="SearchBox">
                    <!-- Search Box Code -->
                </div>
            </div>

The only way I can get the image to display in Firefox is to enter the full address to the image file.

I have tried this without any success:

<div id="LeftHeaderColumn">
                <img id="Logo" src="/images/logo.gif" alt="Akashic Archives Logo" />
                <div id="SearchBox">
                    <!-- Search Box Code -->
                </div>
            </div>

<div id="LeftHeaderColumn">
                <img id="Logo" src="images/logo.gif" alt="Akashic Archives Logo" />
                <div id="SearchBox">
                    <!-- Search Box Code -->
                </div>
            </div>

What’s up with that?

2 
http://akashicarchives.netcomstudios.com/wp-content/themes/akashicarchives/images/logo.gif

Did you forget to tell us your domain? If its subdomain.netcomstudios.com, wouldn’t the src be

/wp-content/themes/akashicarchives/images/logo.gif

?

3

Yeah that’s my development site. The theme is meant for http://akashicarchives.com but because I need the images to show up, I’ve had to use the full path to the image file on my development site in order to get Firefox to display it.

When I’ve checked in some of the other browsers, some of them display the image without me having to use the full path to the image file.

Is there a reason why Firefox won’t display the image unless I use the full path to the image file?

4

When you set the src to this…

/images/logo.gif

Inspect it with FF/Firebug and look at what it’s trying to find and where ( or net tab ). Copy location, paste, and adjust as needed. I’m pretty sure you’re forgetting to specify the wp-content directory but instead trying just sitename/images and not sitename/wp-content/blabla/images.

5

It’s something on your end that’s wrong, not firefox. Most likely your specifying the wrong folder and that is the problem.

6

I have not forgotten to specify the wp-content directory at all. The way I have it set up is that I have the WordPress files within the akashicarchives subdirectory (the akashicarchives.netcomstudios.com part in bold), so the URL to the images on my development site is as follows: http://akashicarchives.netcomstudios.com/wp-content/themes/akashicarchives/images/ and when I have this:

<img src="http://akashicarchives.netcomstudios.com/wp-content/themes/akashicarchives/images/logo.gif" />

(XHTML) the image shows up in Firefox.

But in my CSS, if I use the

#example { background:#abcdef url(images/logo.gif) no-repeat; }

(just as an example) it works without having to specify the full absolute path to the image file. I did this for the body background.

So I shouldn’t have to use the full path within my XHTML.

I don’t understand why the image doesn’t show up when I use images/logo.gif or /images/logo.gif (just an example) instead of http://akashicarchives.netcomstudios.com/wp-content/themes/akashicarchives/images/logo.gif.

7

I doubt it’s me entering the wrong URL - it works if I use the full path to the image file. It’s only when I use something like

<img id="Logo" src="/images/logo.gif" alt="Blah blah" />

that the image refuses to display.

I don’t get it because I’ve looked at the source on other sites and it works for them.

For example, on the W3Schools site they have:


<a href="http://www.w3schools.com"><img border="0" src="/images/h_logo.gif" width="203" height="20" alt="w3schools" title="w3schools" /></a>

How come it works as intended for them?

Is the width or height attribute mandatory? I’m going to see if that helps…

EDIT: Just checked and it doesn’t help. I even tried turning off hotlinking in CPanel but that hasn’t worked either.

ANOTHER EDIT: I’ve found a happy medium which is that I can just use ./wp-content/themes/akashicarchives/images/logo.gif as the path instead of the full path. It must be a WordPress thing.

8

But that’s not the same thing. The path /images/logo.gif would resolve to http&#58;//akashicarchives.netcomstudios.com/images/logo.gif. A path beginning with a ‘/’ character is relative to the site root directory. You need to specify the full path, as

<img id="Logo" src="/wp-content/themes/akashicarchives/images/logo.gif" alt="Your company name">

(Note that the alt attribute is required for images.)

That’s a document-relative URI, rather than a root-relative URI. It will work as long as your style sheet resides in the parent directory of the images directory (i.e., /wp-content/themes/akashicarchives).

9

Yes, I realised what had happened. So now I’ve removed the http://akashicarchives.netcomstudios.com part and left the rest of the path intact. I was just a bit confused earlier. I knew I shouldn’t have to use the full path, so the answer lay somewhere in-between. lol

Cheers. :slight_smile: