I have a problem with Firefox 2 where if I resize the height of a DIV
(using JavaScript), but the rest of the page below isn't being updated
to reflect the new positions that affected items should be in. If I
(using the mouse) resize the browser slightly, then somehow FF2 realizes
things aren't in the right place and re-renders the page correctly. If I
were to have a JS function ( document.body.r ender(); ) available to me
for example, then I could manage this problem, but I don't. Or do I ?
I'm assuming there's a CSS property that can influence this behavior
somehow. Surely there must be, because *this simple test example below
is working just perfectly*. On the complex page I'm trying to implement
this on though, it doesn't work. The complex page has several CSS files
in it and I can't get any information from anyone knowledgeable about it
either. I've made this example below as minimalist as possible (removing
title, doctype and anything else I think is irrelevant to the example).
The only difference (in principle) between what I'm doing here (which
works) and what I'm doing on the complex page (which doesn't work) is
tons of CSS.
On the complex page, when you click on "200", then "div1" overlaps
"div2" until you resize the browser a little bit. And when you click on
"50", you see "div2" is left hanging further down until you resize the
browser a little.
<html><head>
<script>
function resizenow(x){
document.getEle mentById("div1_ inner").style.h eight=x+"px";
}
</script>
</head><body>
<form>
<input type=button value="50" onclick="resize now(50)">
<input type=button value="200" onclick="resize now(200)">
</form>
<div id="div1" style="display: block;backgroun d-color:yellow;">
<div id="div1_inner " style="display: block;height:50 px;">
<img width="100%" height="100%" src="" border="1">
</div>
</div>
<div id="div2">Somet hing here</div>
</body></html>
(using JavaScript), but the rest of the page below isn't being updated
to reflect the new positions that affected items should be in. If I
(using the mouse) resize the browser slightly, then somehow FF2 realizes
things aren't in the right place and re-renders the page correctly. If I
were to have a JS function ( document.body.r ender(); ) available to me
for example, then I could manage this problem, but I don't. Or do I ?
I'm assuming there's a CSS property that can influence this behavior
somehow. Surely there must be, because *this simple test example below
is working just perfectly*. On the complex page I'm trying to implement
this on though, it doesn't work. The complex page has several CSS files
in it and I can't get any information from anyone knowledgeable about it
either. I've made this example below as minimalist as possible (removing
title, doctype and anything else I think is irrelevant to the example).
The only difference (in principle) between what I'm doing here (which
works) and what I'm doing on the complex page (which doesn't work) is
tons of CSS.
On the complex page, when you click on "200", then "div1" overlaps
"div2" until you resize the browser a little bit. And when you click on
"50", you see "div2" is left hanging further down until you resize the
browser a little.
<html><head>
<script>
function resizenow(x){
document.getEle mentById("div1_ inner").style.h eight=x+"px";
}
</script>
</head><body>
<form>
<input type=button value="50" onclick="resize now(50)">
<input type=button value="200" onclick="resize now(200)">
</form>
<div id="div1" style="display: block;backgroun d-color:yellow;">
<div id="div1_inner " style="display: block;height:50 px;">
<img width="100%" height="100%" src="" border="1">
</div>
</div>
<div id="div2">Somet hing here</div>
</body></html>
Comment