Question

This question regards my personal photography website. I use the following javascript to generate random image sequences each time the page is loaded or refreshed:

    <script type="text/javascript"> $(function () {
  var ar = [];
  function returnRandomUnique() {
    if ( !ar.length) {
      for (var i = 16; i > 0; i--)
        ar[ar.length] = i;
    }
      return '<img alt="photograph" class="picture" src="images/work_images/image_' + ar.splice(Math.floor(Math.random() * ar.length) ,1) + '.jpg"  height="550" width=""/>';
   }
  // test
  var str = [];
 for (var j = 0; j <16; j++){
    str[str.length] = returnRandomUnique();
  }
 $("#mainwork").append(str.join(''));
 });
  </script>

My html and css both validate (css has border radius warnings for three buttons) and the site looks good on everything except any version of IE. The problem is that the width of each image varies and cannot be specified (heights are all consistent at 550px –the site scrolls left to right.)

IE displays each image as a line, 550px high by 1px wide. I’d like to find a value that will allow the images to display properly or force IE to use a different html page that will have a fixed layout (remove the random image generator javascript) where I can add the values as appropriate. I don’t know how to force one browser to use a different html file. Any help would be greatly appreciated. I’m not really familiar with javascript, but found this in a library and modified it as best as I could to fit my needs.

Thanks,

Matt

Answer 1

You should remove width="". If I remember correctly, that screws up IE.

---

Testing it here: http://jsfiddle.net/4pE7E/

In IE9/8/7, it does indeed cause the image to be 1px wide.