SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Enthusiast
    Join Date
    Jan 2009
    Posts
    58
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    picture will not display

    Hi All,

    I am a newbie at web design and am having a strange problem. I have one photo that is not loading onto the web page, I have tried time and time again and changed the name of it but it wont appear on the web. The strange thing is that it seems fine when I open it with Firefox (the same browser I am using to view it on the web) on my computer, the image comes up fine. I would send you all the markup but as it appears when I open it on my computer through the same browser it works fine (mind you, I am not so arrogant to believe that my markup is perfect, if the problem has a possibility of being linked to my markup let me know and I will provide it). What things should I be checking and where is the problem likely to lie? I have other photos that go through without a problem.

    Any help/advice would be really appreciated.

  2. #2
    SitePoint Addict
    Join Date
    Apr 2006
    Posts
    249
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Could be lots of things... So it works when you view it on your local computer, but not on the server? Could be the file is in the wrong place on the web server, or something went wrong when it was uploaded. Another common problem is case-sensitivity - windows is not case-sensitive, but many web servers are. So if the uppercase/lowercase letters don't match exactly, that could cause a problem.

  3. #3
    SitePoint Enthusiast
    Join Date
    Jan 2009
    Posts
    58
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi adwatson,

    Thanks for your help. You are right, it could be several things, sorry that I was a bit vague. I have done some more tests to try to isolate the problem but still no joy, here is what I have tried:

    1. Changing the name of the photo and in the markup.
    2. I was using Linux and GFTP to try and transfer so I swapped to Windows (Vista) and used Filezilla.
    3. Tried to change the photo. (even the new photo didn't pop up!)
    4. Changed the photo and the name.
    5. I have no spaces or capitals in any of the names.

    The only thing I can now think of is that it is the markup but I cant find my mistake. (I have only been doing this for a few weeks so it may be something really simple)

    Here is my markup:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Hook and Us-Stories and tales-The Duracell Dog.</title>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO 8859-1"/>
    <link href="style.css" rel="stylesheet" type="text/css"/>
    </head>

    <body>
    <div id="bodycontent">
    <div class="bl"><div class="br"><div class="tl"><div class="tr">
    <div id="header">
    <div id="sitebranding">
    <h1>Hook and Us</h1>
    </div>
    <!-- end of sitebranding div -->
    <div id="tagline">
    <p>The Duracell Dog.</p>
    </div>
    <!-- end of tagline div -->
    </div>
    <!-- end of header div -->
    <div id="navigation">
    <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="stories.html">Puppy Tails</a></li>
    <li><a href="gallery.html">Gallery</a></li>
    <li><a href="funny-photos.html">Funny Photos</a></li>
    </ul>
    </div>
    <!-- end of navigation div -->
    <div id="main">
    <div class="galleryphoto-port-story">
    <p><img src="hook-at-vets.jpg" width="300" height="400"
    alt="Hook at 5 after his appointment with the Vet after chewing a battery, he has a cone on his head,an IV needle in his leg and is looking very sorry for himself"/></p>
    <p>This is Hook at the Vets, after the battery incident, notice the IV needle in his leg and the "megaphone" on his head.</p>
    </div><!-- end of galleryphoto-port-story div -->

    <!-- end of main div -->
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    <script type="text/javascript">
    var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
    document.write(unescape("&#37;3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
    </script>
    <script type="text/javascript">
    try {
    var pageTracker = _gat._getTracker("UA-7260629-1");
    pageTracker._trackPageview();
    } catch(err) {}</script>
    </body>
    </div> <!-- end of body div -->
    </html>

    I have put most of the markup, so I am sorry if I have gone too far, the only thing I missed out was the main text for the story.

    Any other suggestions would be really welcome.

    Thanks again for your time.

  4. #4
    SitePoint Guru cyjetsu's Avatar
    Join Date
    May 2008
    Posts
    814
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Did you check the extension?
    One thing I have noticed is that windows xp(maybe vista too) saves jpg files as ."JPG" in ms paint. Windows as I know it, is not case sensitive, so using src=..."jpg" will show on your computer, then when you upload to a unix/linux server which is case sensitive it will not read it, so you need to rename the ".JPG" to "jpg"

  5. #5
    SitePoint Enthusiast
    Join Date
    Jan 2009
    Posts
    58
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi cyjetsu,

    Thanks for your reply. Its definitely a .jpg and not a .JPG extension. The strange thing is that the other pictures download fine i.e. show on my computer and on the website.

    Is there anything else I can check?

  6. #6
    SitePoint Wizard bronze trophy Tailslide's Avatar
    Join Date
    Feb 2006
    Location
    Bedford, UK
    Posts
    1,687
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can you give us a link to the live page - it'll be easier for us to figure out.
    Little Blue Plane Web Design
    Blood, Sweat & Rust - A Land Rover restoration project

  7. #7
    SitePoint Enthusiast
    Join Date
    Jan 2009
    Posts
    58
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi everyone,

    Thank you all for your help, I do appreciate it.

    Please bear in mind that I have only been learning web design for a month so it is a very basic site.

    The link is: http://www.diversiontours.com/duracell-dog.html

    At the top left the alt description pops up but the picture is being very stubborn.

    Thanks again and any more help would be appreciated.

  8. #8
    Error 404: Life not found silver trophybronze trophy
    Join Date
    Dec 2007
    Location
    UK Nr Manchester
    Posts
    3,460
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've had this problem in the past but for the life of me I can't rememer how I solved it, I just put it down to a snafu that resolved itself.

    You do have an open <p> tag at the start of the line containing the image src, try removing that and see what happens, it's semantically incorrect to enclose an image in <p> tags anyway, just use the CSS to float it right and give it some bottom and left margin so the text wraps around it.

    For the record, I usually create a folder called 'assets' and put all images into there so there not all mixed up with your other fies on the same path level, it just makes file management easier. I also use absolute URLs for everything so the image path would be:

    http://www.diversiontours.com/asetts/hook-at-vets.jpg
    It's 530 people, but do you really get it?
    ImgWebDesign - Web design in Buxton, High Peak, Derbyshire UK.

  9. #9
    Non-Member
    Join Date
    Jan 2009
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    try to check on your extensions... specially pictures... either .jpg or .gif

  10. #10
    SitePoint Enthusiast
    Join Date
    Jan 2009
    Posts
    58
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi JJMcClure,

    Thanks for the help, I didnt know about absolute URLs. Thats something new I have learned today!! I have deleted the rogue <p> and put all the photos in the assets folder you mentioned (another great tip!!) but still the problem persists. I hope I am not becoming a pain in the a***?! Its only a test website so it doesn't really matter but I am also eager to learn and therefore if I get this problem on a more important site I will know what to do!

  11. #11
    Error 404: Life not found silver trophybronze trophy
    Join Date
    Dec 2007
    Location
    UK Nr Manchester
    Posts
    3,460
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Jan23778 View Post
    Hi JJMcClure,

    Thanks for the help, I didnt know about absolute URLs. Thats something new I have learned today!! I have deleted the rogue <p> and put all the photos in the assets folder you mentioned (another great tip!!) but still the problem persists. I hope I am not becoming a pain in the a***?! Its only a test website so it doesn't really matter but I am also eager to learn and therefore if I get this problem on a more important site I will know what to do!
    No probs, sorry but I think I made you spell 'assets' wrongly in your file path (asetts) even though we both managed to spell it correctly elsewhere in our posts...

    Have you tried remaking the original image and uploading the new version?

    Also, I just noticed that you've included your email address in real text at the bottom of the page, I'd advise against this as it will get picked up by spam bots. Either use a form or find an email address obfuscation method, there are plenty if you Google it.
    It's 530 people, but do you really get it?
    ImgWebDesign - Web design in Buxton, High Peak, Derbyshire UK.

  12. #12
    SitePoint Enthusiast
    Join Date
    Jan 2009
    Posts
    58
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi JJMcClure,

    I have learned a lot from you today alone!! I have now changed the email address to HTML code which should be OK. Dont worry about the "assets-asetts" thing, as long as it works-which it does-the spelling doesn't bother me.

    I have tried to reuse the original photo and also a completely different one and it still doesn't seem to want to display!

    If there is anything else I can try I am all ears, otherwise I do appreciate (always worth repeating when I am thanking people for their time) all of your help. Thanks!

  13. #13
    Error 404: Life not found silver trophybronze trophy
    Join Date
    Dec 2007
    Location
    UK Nr Manchester
    Posts
    3,460
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Jan23778 View Post
    I have tried to reuse the original photo and also a completely different one and it still doesn't seem to want to display!
    Have you tried actually remaking the image? I think that's what worked for me. I exported a .psd from phtoshop as a .jpg and I had the exact problem you had. Renaming it, re-uploading it, deleting it... nothing worked. So I made it again in photoshop and exported it again and hey presto, it suddenly worked...

    No idea what caused it, I'm sure there's an explanation somewhere but I've had no luck tracking it down so far.
    It's 530 people, but do you really get it?
    ImgWebDesign - Web design in Buxton, High Peak, Derbyshire UK.

  14. #14
    SitePoint Enthusiast
    Join Date
    Jan 2009
    Posts
    58
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It worked it worked!!!!!
    Well... I changed it to a png file and then back to a jpg but it did not pop up so I just left it as a png file and it is now on the Internet.

    Thank you so much for all your help and hard work!!

    Have a great day


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
  •