Image shows in Safari, not FF or IE

Discussion in 'Web Design and Development' started by dkotter, Jul 30, 2009.

  1. dkotter macrumors member

    Joined:
    Jul 30, 2009
    #1
    First off, thanks for any help in advance. I am new to web design, self taught, and I can't seem to figure out this problem. I have a logo on my website that appears at the top of each page, and it shows up fine in Safari, but for some reason won't show up in Firefox or Internet Explorer.

    Now on those browsers, this messes up the orientation of the page so I really need to fix this. I have checked everything I can think of. The image file name is the same in the HTML document and in the one uploaded to my server. Here is the image code, if that will help:

    <center>
    <table border="0" cellpadding="1" cellspacing="1" width="575">
    <tr>
    <td>
    <img src="dknofill.jpeg" alt="DK Deals Logo" />
    </td></tr>
    </table>
    </center>

    Let me know if anyone has any ideas. Thanks.
     
  2. ChicoWeb macrumors 65816

    ChicoWeb

    Joined:
    Aug 16, 2004
    Location:
    California
    #2
    Try taking out center. Also, check your extension. "JPEG" is so 1990's :) Make sure it's not .jpg or .JPG
     
  3. dkotter thread starter macrumors member

    Joined:
    Jul 30, 2009
    #3
    I took out center, changed the extension to jpg and it still doesn't work. The image is still there in Safari, just off centered. Before in Firefox it showed the alt text and in IE it showed a broken image icon. After taking out center, now it shows nothing in either browser.

    What I really want to know is why does it show up fine in one browser but not in others?
     
  4. jtalbert macrumors newbie

    Joined:
    Nov 7, 2007
    #4
    Is your dknofill.jpeg file on the root of your site? if so try to move it to a folder called images and change the link to
    <img src="/images/dknofill.jpeg" alt="DK Deals Logo" />

    Also are you viewing a published site or just caching it to the browser without it being live online? If your just viewing it from a cache, try publishing it online, then from where it is online, view the source info from the online version and see exactly how it is addressing the file location.

    If your still having problems and you were doing the local cache and its now online, post the online source... I think its how the source file and the cache are not playing nicely together.
     
  5. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #5
    This may be a good time to get acquainted with Firebug, a addon for Firefox that helps great for debugging. It may help you identify where the problem is coming from.

    Also, this may be a time to stop using tables for layout and learn proper CSS to do layouts as you'll have fewer issues like these.
     
  6. dkotter thread starter macrumors member

    Joined:
    Jul 30, 2009
    #6
    Okay I changed the image tag to <img src="/images/dknofill.jpg" alt="DK Deals Logo" /> but it still isn't showing up in Firefox. I'm not sure what you mean by online source. The page is live, it can be viewed here, if that helps anyone. I view the source of the page when I visit it, if that is the online source, and it looks the same as the one above.

    I also installed Firebug, but have yet to really figure out how to use it. Also, when I first designed the site I didn't know CSS, but have since learned and I redid the site with CSS but I guess I forgot to take that table out.
     
  7. IgnatiusTheKing macrumors 68040

    IgnatiusTheKing

    Joined:
    Nov 17, 2007
    Location:
    das Fort
    #7
    Your problem is that the image isn't a JPEG, it's a PSD. Just because you change an image's file extension doesn't mean it will become that sort of file.

    To fix the problem, you need to open that image back up in Photoshop (after changing the extension back to ".psd"), then go to the Save for the Web dialog and save it as a PNG or GIF and make sure to check the "Transparency" box.

    Once you've done that, upload the new PNG/GIF file to the server and change the code to point to that new image.
     
  8. dkotter thread starter macrumors member

    Joined:
    Jul 30, 2009
    #8
    I created it in Photoshop and then saved it as a jpeg. I didn't save it as PSD and then just change the extension myself. But I guess I will try your advice and see if that works. Thanks
     
  9. dkotter thread starter macrumors member

    Joined:
    Jul 30, 2009
    #9
    Okay so I opened up the original PSD file, saved it for the web, and now it is showing up, in Firefox anyways. I have yet to check IE. So thanks for the help. Now I just have to edit the logo a little more, size it down and such.

    On another note, what is the best way to center this image on my site without using the <center> tag? Thanks for all the help.
     
  10. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #10
    You have it in a div with a class of top so in your CSS you can do,

    Code:
    div.top {
     text-align: center;
    }
     
  11. killerrobot macrumors 68020

    killerrobot

    Joined:
    Jun 7, 2007
    Location:
    127.0.0.1
    #11
    I don´t see any missing/broken images in FF using that link.

    Your menu bar covers up most of it, but the DK Deals logo is there.

    EDIT: Should've read down a little farther.:eek:
     
  12. IgnatiusTheKing macrumors 68040

    IgnatiusTheKing

    Joined:
    Nov 17, 2007
    Location:
    das Fort
    #12
    Glad to help.

    Angelwatt's idea is the best way to center your image, but if you don't want to modify the style (for some reason), you can add align="center" to your div tag, like so:

    Code:
    <div class="top" align="center">
     
  13. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #13
    I'm sure you meant,
    HTML:
    <div class="top" align="center">
     
  14. IgnatiusTheKing macrumors 68040

    IgnatiusTheKing

    Joined:
    Nov 17, 2007
    Location:
    das Fort
    #14
    Indeed I did. Oops.
     
  15. dkotter thread starter macrumors member

    Joined:
    Jul 30, 2009
    #15
    Thanks everyone for the help. I was getting pretty frustrated trying to figure this one out on my own. Now if I can just find some time to fix they layout...:)
     
  16. carlosbutler macrumors 6502a

    carlosbutler

    Joined:
    Feb 24, 2008
    Location:
    London City
    #16
    by the way. in FF you get a green border and in safari you dont. i am not sure if you are trying to put a green border there, make as you may have no realised some browsers automatically add a border to an image link. to get rid just either put border = 0 or if its lots then put it in the css file
     

Share This Page