Grow your CSS skills. Land your dream job.

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

  • # January 18, 2013 at 4:50 pm

    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

    # January 18, 2013 at 4:54 pm

    @drudems, do you have a link?

    # January 18, 2013 at 5:02 pm

    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.

    # January 19, 2013 at 6:55 am

    @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

    # January 19, 2013 at 7:44 am

    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.

    # January 19, 2013 at 8:12 am

    @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.

    # January 19, 2013 at 10:03 am

    @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 :)

    # January 19, 2013 at 11:46 am

    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>.

    # January 19, 2013 at 12:59 pm

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

    # January 19, 2013 at 1:19 pm

    @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?

    # January 19, 2013 at 2:08 pm

    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?

    # January 19, 2013 at 6:09 pm

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

    # January 20, 2013 at 4:19 am

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

    # January 20, 2013 at 12:48 pm

    @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.

Viewing 14 posts - 1 through 14 (of 14 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".