views:

59

answers:

1

Hi there!

Ok, so, I have the following markup that opens in a pop-up window (the size is adjusted to 120px width and 300px height via Javascript):

<body bgcolor="#000" topmargin="0" leftmargin="0" style="width:100%">
<table border="0" cellspacing="0" cellpadding="0" width="100%" height="100%">
    <tr>
        <td align="center" height="300" valign="middle">
            <img src="sample.jpg" width="120" height="300">
        </td>
    </tr>
</table>
</body>

I know that the image there is not exactly what you'd call "tabular data" and that there is CSS all over the place. The truth of the matter is; this markup is not best friends with the box model and it's out of my reach to change it, I'm just supposed to find the error I'm about to describe.

Only on Firefox (various versions and plattforms) - and for some reason not always (I couldn't find a pattern yet) - the image isn't displayed in full. The window is getting resized to the correct size, but it seems like the body / table of 100% only shrink to 190px and stop there, from that point on only the viewport shrinks, but the body stays at 190px. Since the image is centered, this causes a 35px border to display on the left side - and the image to overlap the viewport (therefore not being displayed in full).

The weird thing is that I accessed the exact same page with the exact same browser / OS without changes yesterday and could reproduce the error (also after reloads, restarts etc.) and can't anymore, because not the body does shrink to 120px just fine. I can't find the pattern here.

Any suggestions or ideas are greatly appreciated!

Thanks a lot for your help in advance
Tobi

A: 

I know you said the markup is out of your control, but do you need the table at all? If the popup is the same size as the image why not just have the image?

If I remember my 90s HTML, topmargin and leftmargin are IE specific, so you may need your body tag to be:

<body bgcolor="#000" topmargin="0" leftmargin="0" marginwidth="0" marginheight="0">

remove the width 100% if you can. Better still, remove all the body tag attributes and do it all with CSS (which will work much more reliably):

<style type="text/css">
body {
    background-color: #000;
    margin: 0;
    padding: 0;
}
</style>

if it still doesn't work there must be something else on the page causing the issue.

Tim Fountain
Thanks for that, Tim. As said, I can't change it at this point, but I first need to come up with an explanation why Firefox renders it that way. The reason for the table - I think - is that the image is centered in both directions, even if you resize the window. Well, that would also be easy to do with CSS... mhh. Well, anyways, if anyone has experienced or knows the reason for this sporadic 190px width, let me know - I appreciate any help. :)
I think the best way for you to figure out the cause of the problem would be to try and fix it. So I'd suggest saving a copy of the popup HTML page to your local machine so that you can modify it, and then see what it takes to get it working correctly.
Tim Fountain