开发者

Firefox issue: 100% body width stuck at 190px when resizing

开发者 https://www.devze.com 2023-01-09 02:23 出处:网络
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):

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" hei开发者_高级运维ght="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


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.

0

精彩评论

暂无评论...
验证码 换一张
取 消