In IE8, image jumps to correct position after any rollover action on the page...on any element_问答_开发者

I had to hack together a page quickly and used Photoshop to slice up images. Photoshop then exported this as an HTML using complicated table structure and spacer gif's to create the page.

There's some custom content that I need to fill out in some of the table cells. In one part of the table I'm using a flickrbadge (http://www.flickrbadge.com/) to populate the cell with some flickr thumbnails. I don't have control over when this loading happens.

In another cell I have a big Title graphic(<td colspan="4" rowspan="2"> ) and in a cell below it I have HTML text.

The page works doesn't work in IE8 on PC. (Didn't test it with IE7) What is happening is that when the page loads, the Title graphic and the HTML text undereathe appear on top of each other. However, after I rollover one of my image rollovers, the Tit开发者_JS百科le graphic snaps into the correct position!

I suspected that loading of the flickr thumbnails is the culprit, so I commented out the script and the Title graphic appears where it should.

Is there anything I can do in the CSS to help with this such as push the Title graphic up, or populate the flickr cell with a placeholder image?

Update

Can I delay the execution of the flickr script...this is what is in the table cell.

<script type="text/javascript" src="http://www.flickr.com/badge_code.gne?count=16&display=latest&size=square&nsid=12345678@N02&raw=1"></script>

You could try delaying it with:

function initFlickr() {

  setTimeout(function() {

    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = 'http://www.flickr.com/badge_code.gne?count=16&display=latest&size=square&nsid=12345678@N02&raw=1';

    // set an id on the table cell so you can get hold of it here.
    var el = document.getElementById('id-of-that-table-cell');
    el.appendChild(script);

  }, 100); // 100 milliseconds.

}

And then probably want to trigger it from onload.

<body onload="initFlickr()">

Not sure this will work, but it should insert the script after the first successful draw.

Yeah this is IE being funky. You could connect to the image's onload event and change the size of the container from there.

yes, it looks like flickr reads current position of the element you can delay loading of this script this way:

   <script>
     function loadFlickr(){
       var headelement = document.getElementsByTagName('head')[0];
       var scriptvar = document.createElement('script');
       scriptvar.type = 'text/javascript';
       scriptvar.src= 'http://www.flickr.com/badge_code.gne?count=16&display=latest&size=square&nsid=12345678@N02&raw=1';
       headelement.appendChild(scriptvar);
    }
    window.onload = loadFlickr;
  </script>

however, as another poster mentioned you probably want to populate this into particular cell. that's not really possible to delay since flickr is using document.write - the document.write only works before load, before fill HTML is constructed. (Update: you can actually override document.write method itself before flickr loads and change how document.write works just for flickr - i think it's ugly hack, since it relies on knowing what kind of content flickr will output, see bottom of the article here http://www.tutkiun.com/2010/07/load-javascript-after-pageload.html )

The easiest solution for you would be to create entirely new page for just flickr badge and embed it into your table cell using iframe

I actually used this hack:

Right before the closing body tag...

<script type="text/javascript">
/* 
* A hack to reload the title graphic so that it will position itself correctly...
*/
document.images["title_graphic"].src = "images/content_title.jpg";
</script>

This seems to do the trick...

I think I should have just hand coded the page so that I had control. I think part of it was the tables being all wacky too.

I had this happen to me once. The problem ended up being in the html table. I ended up using valign="top" inside the td tag as below: