Single image not showing

Neodite · 7 Jun 2013 at 08:58

Hi guys,

Been working on a small website, and something has got me confused.

I am using images for my menu navigation, and when I uploaded the site onto a server to test, all images show except one...

I have triple checked that the file is on the server and in the correct folder, but it is still now showing.

It shows up on my macbook but not my windows box or my mobile phone.

I have uploaded the site too http://jenny-smith.com/sandyback/index.html

On my mac I can see all the images as it should, but anywhere else I have tried I only get the ALT text for Gallery (All the other images are working as intended).

Any ideas?

Also what is the site for checking website for errors? I have seen it mentioned a few times in here but cannot remember what it is. Cheers.

GravyMonster · 7 Jun 2013 at 09:42

Are you sure the URL for the image is correct? Is there a typo in the filename which you've not made in the HTML? Is it the correct filetype (ie. not a JPG just renamed to a PNG?)

It's possible it's only showing on your Mac because it's cached so try clearing that and F5'ing.

As for checking for website errors do you mean the W3C validator?

Neodite · 7 Jun 2013 at 10:15

W3C thats it cheers

I'm pretty sure the names are all ok.

Code:

        <ul>
              <li class="active"><a href="index.html"><img src="images/home.png" alt="Home" /></a></li>
              <li><a href="about.html"><img src="images/about.png" alt="About" /></a></li>
              <li><a href="services.html"><img src="images/services.png" alt="Services" /></a></li>
              <li><a href="gallery.html"><img src="images/gallery.png" alt="Gallery" /></a></li>
              <li><a href="contact.html"><img src="images/contact.png" alt="Contact Us" /></a></li>	
        </ul>

And from the server..

So it's deffo on the server and in the same folder as the others, and the code is the same, I just dont get it.

uniQ · 7 Jun 2013 at 10:16

It's not an HTML problem. Either It doesn't exist in the location with that file name or it didn't transfer properly. Try re uploading the png.

http://jenny-smith.com/sandyback/images/gallery.png

Also instead of using symbols (copyright) you should use HTML Entities: ©

Neodite · 7 Jun 2013 at 10:47

uniQ, cheers I have replaced the symbol with ©

As for the .png I have re-uploaded it but still no good

simisker · 7 Jun 2013 at 11:05

The gallery.png is 28KB, while all the others are <2KB.

My guess is that there's some non-standard metadata or colour profile info that was embedded when the image was saved/exported.

Re-save/export the image until it's more in line with the others, KB-wise.

Neodite · 7 Jun 2013 at 13:35

Simisker, thankyou, re-creating the .png did in fact work

Not quite sure how I managed that one lol.

Neodite · 7 Jun 2013 at 15:00

One more quick thing (hopefully)

I've been asked to change the font to match the logo, but they are no standard fonts.

I have tried uploading the font too the server and linking to it in the CSS. But does not work on computers that do not have the fonts installed.

What's the best way to go about it?

GravyMonster · 7 Jun 2013 at 15:14

Have a search on Google fonts for one similar, it couldn't be easier to setup.

zyfar · 7 Jun 2013 at 16:14

Google Fonts is a good free option. Also do a quick google for @font-face. You upload the file to your server and it will get loaded through CSS.

I personally use Typekit now, by Adobe. It's great.

Neodite · 7 Jun 2013 at 16:15

Yeah I was using google fonts before, but I couldn't find any close enough

Neodite · 7 Jun 2013 at 16:20

@font-face worked perfect, thankyou

Neodite · 9 Jun 2013 at 14:21

Instead of making a new topic......

I have finished the site now, anyone mind taking a look and let me know what they think? cheers.