IE8 not showing pics, Firefox shows all – web site development

[drudems]

Hi,

I’ve just started working on my first website (learn as you do!) and have used a template to help me get started. I have included some .png pics into the web page however when I go to view on IE8 it doesnt always show up (1 in 5 it will show the pics, others will just show the picture missing icon). I’ve tried it on Firefox and it works fine everytime. Is there something I.m missing which IE8 needs?

Also I’ve also noticed one link to another page cannot be clicked on IE8 however the link works fine in Firefox?! I’m unsure if its the actual HTML code or anything in the css?! I’ve triple checked but there is nothing I can see which may be wrong… I’ve been using the Microsoft Expression Web 4 and thats saying theirs no issues

Any help would greatly appreciated.

Thanks

[Anonymous]

If your website is not on a domain yet use [Codepen](http://codepen.io/ “codepen”) create a new pen,paste your HTML code on the console and share the link. That way we can help you.

[drudems]

@ChrisP and @Jarolin Thank you both for coming back to me. I have used Codepen and added the section causing the problem for the pictures not always showing. There was no option to add the pics themselves as the only copies are on my own pc but I will be more then happy to send over the complete file if that would help?

http://codepen.io/drudems/full/fidBj

In regards to the link not working I have included the main list on the link below. On firefox I can click on a link and it will take me to the page but in IE8 it wont(?)

http://codepen.io/drudems/full/lDmtx

Thanks again for being able to look at these for me

[Kitty Giraudel]

If you want to add images in a reduced test case, you can use http://lorempixel.com/. It’s very easy to use.

Basically, if you want a 200*200 image, you just define the src of your img tag to http://lorempixel.com/200/200.

[hotpink]

@drudems

In your 2nd example, you have some improper line break tags.
The
tag is a special case that does not follow the typical format.
The
tag has no closing tag.

Try changing this

To this

Full example here. Also, I made a small adjustment to the hover effect of the links, maybe you will prefer it to what you have.
http://codepen.io/jessecfisher/pen/tJmEu

I don’t know about the IE8 problem loading png images.

[drudems]

@HugoGiraudel Thanks for the website links re the pictures, I’ll be using that movng forward, definitely very useful

@hotpink Thank you for the info, I have started amending the code on my html file (turns out I have it written the wrong way on multiple pages!) and thank you for the adjustment to the hover effect, I have added that to :)

[Kitty Giraudel]

Actually the / is only required when using XHTML 1.0 Strict as far as I know. If you’re running some HTML5 doctype, you’re totally fine with <br>.

[Andy Howells]

</img> is not a thing – That might be causing the problem.

[drudems]

@AndyHowells I have tried removing the with no luck, it’s still not always showing the picture. Thank you for letting me know that is not meant to be written, I have deleted them now. Should I end an image with /> instead?

[Andy Howells]

You can do but if it’s HTML5 you don’t need to use it. Regarding IE8 are you using an HTML5 Shiv/Shim to help with HTML5 elements?

[drudems]

@AndyHowells apologies but im not sure what HTML5 shiv is?

[maharba]

https://css-tricks.com/html5-innershiv/

[Andy Howells]

@drudems – A HTML5 shiv/shim (both are the same thing just with different ending letters!) tells older versions of Internet Explorer what HTML5 elements like section, article, aside, nav etc are so they will display as expected.

[Author]

Posts