Element Width 0 When Changing CSS Display

Question

Hello
I have a webpage containing several Divs which contain individual 'pages'. I have defined the following CSS styles to control which the user sees:
.hideDiv{
    display: none;
.showDiv{
    display: inline;
I have a simple Javascript function which switched the CSS styles to display the required page:
function hideShow(hideDiv, showDiv){
          //alert("hideShow");
          if(document.getElementById(hideDiv)!=null){
                    document.getElementById(hideDiv).className = "hideDiv clear";
          if(document.getElementById(showDiv)!=null){
                    document.getElementById(hideDiv).className = "showDiv clear";
          return false;
Within each 'page' div are 1 or more simple tables containing images. The CSS on these tables positions them from the right like this:
<table style="position:absolute; right:40px; bottom:30px; z-index:1;">
          <tr><td>
                    <img src="{media}" alt="{mediaAlt}" style="display:block; position:relative;"/>
                    <p class="padCaption">{mediaCaption}</p>
          </td></tr>
</table>
When I display page 2 (the first page to have its CSS display property changed from 'none' to 'inline') the image is displayed off to the right and down too low. As soon as I slightly resize the browser window it jumps to the correct position.
I suspected that the browser was unable to ascertain the image's width and height and so assumes 0 pixels for both. This being the case the right and bottom edges were correctly positioned but only assuming the image has a width and height of 0 pixels!
I extended my Javascript function to check this and ,my thoughts were confirmed.
Fortunately (for once) our client has IE6 and this problem isn't seen by them. All of the elements in the complete html file apper to be cached when the page initially loads and it has no problem with the images.
We need to use Safari for some presentations and can't seem to resolve this. I tried positioning the div to one side and then moving it but it all happens before the UI updates and the browser is still none the wiser as to the dimensions of the image.
Any advice would be gratefully received.
Thanks
Chris

Answer 1

Hello Jon
Thanks for the prompt reply. Sorry I can't share the page but I can extract some elements to show. Each 'page' div is like this:
<!-- Page 1 -->
<div class="showDiv clear" id="page1">
    <div id="bgPic-components">
        <!-- Sub-Heading -->
        <h1>Sub-Heading</span></h1>
        <!-- Page Content Area -->
        <div class="contentTextArea fullWidth">
            <div style="position:absolute; width:280px; z-index:2;">
                <p>Some body text here.</p>
            </div>
            <table style="position:absolute; right:40px; bottom:40px; z-index:0;">
                <tr><td>
                    <img src="../../medialibrary/3DI/3DI0315.02.01.jpg" style="display:block; position:relative; height:440px;"/>
                    <p class="padCaption">Annotation</p>
                </td></tr>
            </table>
            <table style="position:absolute; bottom:24px; z-index:0;">
            <tr><td>
                <img src="../../medialibrary/photographs/P0825.01.01.jpg" alt="" style="display:block; position:relative; height:300px"/>
                <p class="padCaption">Annotation</p>
            </td></tr>
        </table>
        </div>
    </div>
</div>
Thanks
Chris