Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

Image shows in Safari, not FF or IE

D

dkotter

macrumors member
Original poster
Jul 30, 2009
57
0
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.
 
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?
 
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.
 
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.
 
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.
 
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.
 
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
 
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.
 
dkotter said:
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.
Click to expand...

You have it in a div with a class of top so in your CSS you can do,

Code: 
div.top {
 text-align: center;
}
 
dkotter said:
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.
Click to expand...

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:
 
dkotter said:
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
Click to expand...

dkotter said:
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.
Click to expand...

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">
 
IgnatiusTheKing said:
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" style="center">
Click to expand...

I'm sure you meant,
HTML: 
<div class="top" align="center">
 
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...:)
 
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
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back