smaller works in Firefox v22.0, but not in IE v10.0.9

Question

I'm successfully displaying a photo in Firefox version 22 -- in two different img tags -- one of the img tags has no CSS width or height set, and so the image appears in its original size.

The second img tag is set by a CSS style to be 60px by 60px.

When I set the 'innerHTML' of these two img tags, in Firefox I see the original-size image and the same image shrunk down to fit in the 60px by 60px img tag.

In IE version 10.0.9, I simply do not see anything in the second img tax that is set to be 60px by 60px via CSS.

It's the exact same code that's executing. Is there something I need to do for IE to show the image in the 60px by 60px img tag that is not present in my code here?

By the way, the code below is generated in a PHP file -- I use the 'hidden Iframe' approach to load then display the image on the web page -- the code below is generated in a PHP file then outputs what you see below to my hidden iframe on my html page, which is why you see the code here getting the parent document of the iframe:

<script language="JavaScript" type="text/javascript">
var parDoc = parent.document;

parDoc.getElementById('justOpenedImage').innerHTML = 
   '<div><img src=\'http://localhost/thesite/aPhoto.jpg\' /></div>';

parDoc.getElementById('60by60').innerHTML = 
  '<div><img class="60by60Image" src=\'http://localhost/thesite/aPhoto.jpg\' /></div>';
</script>

Here is the CSS class 60by60Image:

 .60by60Image
 {
    border: 2px solid green;   
    width: 60px; 
    height: 60px;
    display: inline-block;
 }

Here is the html on the page:

     <!-- THE ORIGINAL-SIZED IMAGE APPEARS FINE HERE IN BOTH IE AND FF -->
     <div id="justOpenedImage"></div>


     <!-- THE SMALLER IMAGE APPEARS HERE IN FIREFOX BUT NOT IN IE -->
     <div>
         <img class="60by60Image"  id="60by60" src="" />
     </div>

This has been working fine in Firefox but in IE it fails to show the smaller 60 by 60 version of the image -- not sure why.

But it's Internet Explorer 10. Which is a lot better than its evil brothers. — JiminP, Aug 03 '13 at 16:30
You set the `innerHTML` of an image (which should not have that property`. Try setting the `innerHTML` of the wrapper `
` instead. — AmazingDreams, Aug 03 '13 at 16:32
Can class names start with numbers in IE? I thought that was a thing... — Phix, Aug 03 '13 at 16:32
Can you create a fiddle out of this code? @Phix It should display the image anyway. — MaxArt, Aug 03 '13 at 16:34
@Phix This might answer your question about class names http://stackoverflow.com/a/1554765/1415724 this goes for the OP also. — Funk Forty Niner, Aug 03 '13 at 16:37
`@OP` Just for testing purposes, try starting your classes with a letter, see if that makes a difference. For example `a_60by60Image`. — Funk Forty Niner, Aug 03 '13 at 16:41

score 4 · Accepted Answer · answered Aug 03 '13 at 16:37

You set the innerHTML of the image. After execution of your script, the document tree looks something like this:

 <div>
     <img class="60by60Image"  id="60by60" src="">
         <div><img class="60by60Image" src='http://localhost/thesite/aPhoto.jpg' /></div>
     </img>
 </div>

I think IE just does not 'handle' this. At least, it is not valid HTML.

You can fix this by adding the id="60by60" attribute to the parent div, and remove it from the img. Letting javascript change the innerHTML of the div instead of the image.

<div id="60by60">
     <img class="60by60Image" src="">
</div>

Or change the src attribute of the image.

parDoc.getElementById('60by60').src = 'http://localhost/thesite/aPhoto.jpg';

I changed my code for the 60px by 60px image to use your 2nd suggestion -- parDoc.getElementById('60by60').src = 'http//localhost/thesite/aPhoto.jpg\'; and that works in both Firefox and in IE -- thanks. — CFHcoder, Aug 03 '13 at 16:46

smaller works in Firefox v22.0, but not in IE v10.0.9

1 Answers1