10 Replies Latest reply: Jul 5, 2013 6:18 AM by don@fmadesign.com RSS

    Image preview in IE10


      After searching forums for two days -- still baffled. 


      I have a jpg image that "previews in browser" fine for Chrome, and fine in the DW display panel, but refuses to "preview in browser" in IE10.  I suspect it is something about a specific jpg, because other jpgs in the same folder, etc. display fine.  Adobe chat support (very disappointing!) said "...it sounds like a browser or CSS problem." 


      I have checked links, rooted, set up site correctly, etc.  URLs are fine (after all, it displays in Chrome, etc.)  Just that one jpg refuses to preview in IE10.


      Any suggestions before I lose the second to the last of my remaining marbles?

        • 1. Re: Image preview in IE10
          Nancy O. MVP

          Your image is probably CMYK or too big for the web.

          1. In Photoshop, open image.  Go to File > Save For Web as optimized .jpg.
          2. Adjust height and width to fit your page layout.
          3. Choose a file size that isn't too large yet gives decent picture quality.



          Nancy O.

          • 2. Re: Image preview in IE10
            don@fmadesign.com Community Member

            Thank you Nancy O :-)


            Something else must be happening, though.  The image is rgb at 172K -- should work.  I didn't realize IE had a size limit -- so you helped me learn something there.


            Very strange that Chrome and Display is fine, and only IE10 fails.  I am current;ly researching "CSS Hacks" that were mentioned in a few web postings about imageds and IE.  No luck yet.


            Don R

            • 3. Re: Image preview in IE10
              mytaxsite.co.uk MVP

              Can you post your image somewhere where we can have a look at it or paste your image in these forums.


              Also, tell us something about your operating system - Win7 or Win8.

              • 4. Re: Image preview in IE10
                don@fmadesign.com Community Member

                Thanks, Mytax


                I just received an email from the site where I downloaded the original template:


                Hi there. IE's default security settings prevent local HTML files (ie. ones on your own computer) from using Javascript. However,, if you upload the files to an actual website everything will work just fine."


                Seems an odd answer, since this does not appear to be a javascript issue.  Will experiment with the security settings later today, though.


                Here is the image -- nothing special -- just a 172K rgb jpg





                Win 7/64, IE10 (current), current DW, PSD


                I think I hide this page on an existing website and see if the suggestion, above, is true.


                TY for the help!

                • 5. Re: Image preview in IE10
                  mytaxsite.co.uk MVP

                  Not sure what exactly is the problem but I have created a test page here.  Please  click on this link in IE10 and see if it loads at your end.





                  • 6. Re: Image preview in IE10
                    don@fmadesign.com Community Member

                    Hi MyTax


                    Amazing follow-up by you.  TY!


                    Aye, your page displays fine.  It led me to some additional testing.  When I just double-clicked the html file to open in browser, the same thing occured (the cover jpg does not display but all other jpgs do.)  That tends to elim DW as the culprit.


                    I moved the file folder to another comp that also has ie10 -- on that one all is good!  Same files and image, but now opens fine in ie10.  Other comp has same config of ie10, Win 7/64 (and Norton 360).


                    Tomorrow I will try disabling Norton (a long shot, but eliminates a possibility).  Then will uninstall and reinstall ie10 to see if it is fragged.  There is an outside chance there is a CSS-specific issue related to the OS, but I hope I find the answer before trying to chase that nasty longshot.


                    FYI -- I find a lot of instances in various forums of the same symptom -- but none of dozens of sites I found also had a solution.


                    TY for all your effort.  Loading the image for a test on your site is above and beyond!


                    Don R

                    • 7. Re: Image preview in IE10
                      pziecina Community Member



                      What happens when you insert the offending image into an otherwise blank HTML page?


                      Does the image contain any copyright meta data, or an embedded ICC color profile?


                      Can you open the image in IE10, from your image editing software, using its 'preview in browser' option?


                      Note: IE does not have an image size limit, it did have a limit on the number of CSS files it could process for a page prior to IE10 though.



                      • 8. Re: Image preview in IE10
                        don@fmadesign.com Community Member

                        Excellent, PZ!  Nice catch!


                        When I load the image into a blank page, it displays correctly.  I think you are pointing me back to the CSS issues.  (I am wondering if I am missing something obvious with my settings for padding, etc?)


                        BTW -- this was after trying disabling Norton and reinstalling ie10 -- neither of which helped.


                        here is the raw image line that worked fine in your "blank page" suggestion:


                        <img src="images/cover.jpg" width="920" height="673" alt="" />


                        Here is the applicable part of the calling section of the problem page that does not display in ie10:


                        <div id="banner" class="container">

                        <div id="image-banner">

                        <img src="images/cover.jpg" width="920" height="673" alt="" />


                        Here is the supporting CSS:


                        /** BANNER */


                        #banner {

                                       position: relative;

                                       width: 920px;

                                       height: 673px;

                                       padding: 10px;

                                       background: #FFFFFF;



                        #image-banner {

                                       position: absolute;

                                       width: 920px;

                                       height: 673px;

                                       top: 10px;

                                       left: 10px;



                        #banner-caption {

                                       position: absolute;

                                       margin-left: 50px;

                                       padding: 68px 80px 0px 500px;

                                       font-family: 'Signika', sans-serif;

                                       color: #FFFFFF;



                        #banner-caption h2 {

                                       letter-spacing: -2px;

                                       font-size: 38px;

                                       font-weight: 700;

                                       color: #FFFFFF;



                        #banner-caption .text1 {

                                       margin-top: -5px;

                                       padding: 0px;

                                       letter-spacing: -3px;

                                       font-size: 30px;



                        #banner-caption .text2 {

                                       margin-top: -37px;

                                       padding: 0px;

                                       letter-spacing: -1px;

                                       font-size: 18px;



                        to your other questions:


                        No -- does not open in ie10 when preview in browser (does open in Chrome)

                        No embedded profile -- just a plain-vanilla PSD "save for web" jpeg


                        The effort by people in this forum to track such a finiky issue has been amazing!


                        Don R

                        • 9. Re: Image preview in IE10
                          pziecina Community Member



                          O/K, the next thing to try -


                          Try saving the file for the web as a 'png' file, and see if this works.


                          In your css you have caption text, can you see this text?



                          • 10. Re: Image preview in IE10
                            don@fmadesign.com Community Member

                            Well, no clue why this works, but I found a fix.  PZ's suggestions led me in the right direction.


                            (BTW -- changing to PNG did not fix the issue.  Also, the same issue occurred when I tested this in ie9.)


                            What worked is checking the "Preview using temporary file" box in the "Preview in browser" preferences pane.  I have no idea why this makes such a difference only for IE10, but it does!


                            Any of you IE gurus have any idea why this works?  I wonder if it is the answer to a dozen other sites I visited where users had the same (unanswered on any of those sites) question.


                            Thank you everyone here!


                            Don R