SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Evangelist happyoink's Avatar
    Join Date
    Jan 2008
    Location
    UK
    Posts
    503
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    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):

    HTML Code:
    <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:

    HTML Code:
    <div id="LeftHeaderColumn">
                    <img id="Logo" src="/images/logo.gif" alt="Akashic Archives Logo" />
                    <div id="SearchBox">
                        <!-- Search Box Code -->
                    </div>
                </div>
    HTML Code:
    <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. #2
    Guru in training bronze trophy SoulScratch's Avatar
    Join Date
    Apr 2006
    Location
    Maryland
    Posts
    1,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    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

    Code:
    /wp-content/themes/akashicarchives/images/logo.gif
    ?
    Cross browser css bugs

    Dan Schulz you will be missed

  3. #3
    SitePoint Evangelist happyoink's Avatar
    Join Date
    Jan 2008
    Location
    UK
    Posts
    503
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    Guru in training bronze trophy SoulScratch's Avatar
    Join Date
    Apr 2006
    Location
    Maryland
    Posts
    1,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    When you set the src to this..
    Code:
    /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.
    Cross browser css bugs

    Dan Schulz you will be missed

  5. #5
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,623
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    It's something on your end that's wrong, not firefox. Most likely your specifying the wrong folder and that is the problem.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  6. #6
    SitePoint Evangelist happyoink's Avatar
    Join Date
    Jan 2008
    Location
    UK
    Posts
    503
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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...chives/images/ and when I have this:
    HTML Code:
    <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
    Code CSS:
    #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...mages/logo.gif.

  7. #7
    SitePoint Evangelist happyoink's Avatar
    Join Date
    Jan 2008
    Location
    UK
    Posts
    503
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    HTML Code:
    <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:

    HTML Code:
    <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.
    Last edited by happyoink; Feb 4, 2009 at 11:46.

  8. #8
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Silver Firefly View Post
    when I have this:
    HTML Code:
    <img src="http://akashicarchives.netcomstudios.com/wp-content/themes/akashicarchives/images/logo.gif" />
    (XHTML) the image shows up in Firefox.
    Quote Originally Posted by Silver Firefly View Post
    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
    HTML Code:
    <img id="Logo" src="/images/logo.gif" alt="Blah blah" />
    that the image refuses to display.
    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
    HTML Code:
    <img id="Logo" src="/wp-content/themes/akashicarchives/images/logo.gif" alt="Your company name">
    (Note that the alt attribute is required for images.)

    Quote Originally Posted by Silver Firefly View Post
    But in my CSS, if I use the
    Code CSS:
    #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.
    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).
    Birnam wood is come to Dunsinane

  9. #9
    SitePoint Evangelist happyoink's Avatar
    Join Date
    Jan 2008
    Location
    UK
    Posts
    503
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •