Greetings.
Here is the scenario: I have an element div.aside which is absolutely
positioned in the bottom right corner of its containing box, div.frame.
Said containing box is then resized dynamically via a JavaScript snippet
which turns on or off display of material within the box. One would
expect the div.aside to then reposition itself on the screen so that it is
still in the bottom right of div.frame. And indeed it does in this
minimal example, viewed with Mozilla 1.7.5:
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
<head>
<title>foobar</title>
<style type="text/css">
.frame { border: solid thick black; position: relative;
padding-bottom: 3em;}
.para { border: dotted thin orange; }
.aside { position: absolute;
bottom: 0; right: 0;
border: dotted thin red; }
</style>
</head>
<body>
<div class="frame">
<div class="aside">
This should appear in the bottom right corner of the "frame".
</div>
<p class="para">
Here is a paragraph which should display at the top of the
"frame". <a href="#"
onclick="document.getElementsByTagName('blockquote ')[0].style.display =
'none'">Shrink "frame!"</a>
</p>
<blockquote>
Here is another paragraph which will disappear.
</blockquote>
</div>
</body>
</html>
This example can be viewed at
<http://www.dfki.uni-kl.de/~miller/tmp/html-bst/minimal.html>.
However, in my real-world, more complicated example, the bottom right
element does not reposition itself when the parent box is resized; it
stays right where it is, thus screwing up the layout. I'm not able to
figure out what's causing this behaviour. Is it a bug in Mozilla or am I
doing something wrong? Have I got my CSS file set up wrong or do I need
to invoke some JavaScript function which explicitly redraws the box?
The problem page in question can be viewed at
<http://www.dfki.uni-kl.de/~miller/tmp/html-bst/>. The style sheet is at
<http://www.dfki.uni-kl.de/~miller/tmp/html-bst/css/boxy.css> and the
JavaScript which I use to turn on/off the material within the enclosing
box is at <http://www.dfki.uni-kl.de/~miller/tmp/html-bst/showhide.js>.
The enclosing box is div.bibitem (which for convenience I have surrounded
with a dotted red border) and the bottom-right box is div.iconbox.
Any insights would be very much appreciated.
Regards,
Tristan
--
_
_V.-o Tristan Miller [en,(fr,de,ia)] >< Space is limited
/ |`-' -=-=-=-=-=-=-=-=-=-=-=-=-=-=-= <> In a haiku, so it's hard
(7_\\ http://www.nothingisreal.com/ >< To finish what you
