473,325 Members | 2,308 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,325 software developers and data experts.

Why won't my element stick to its corner?

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
Jul 21 '05 #1
1 2303
Greetings.

In article <23****************@ID-187157.News.Individual.NET>, Tristan
Miller wrote:
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:


I've discovered the problem; in my real-world example, the div.frame was
wrapping another div. Changing this inner div's positioning to "relative"
solved the problem. I'm not sure why it didn't work the original way, but
at least I've found a workaround.

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
Jul 21 '05 #2

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

6
by: Steven Green | last post by:
I have a java app at work I used when I had Windows 98 and never had a problem. I did a clean install of Windows XP and of course Java was not included. I went to Sun, download Java 2 Runtime...
3
by: Markus Ernst | last post by:
Hello Reading the follwing document: http://www.w3.org/TR/WD-positioning-970131#In-flow it seems very clear that position:relative should be relative to the parent element. So in the following...
1
by: Weston C | last post by:
Here's something I'm working on: for a click on a given element, I want to be able capture the x/y coordinates of the mouse -- that is, the mouse coordinates relative to the top left corner of said...
1
by: travis_brooks | last post by:
greetings I had a javascript that was reliably telling me the position of an image on a page, and now its not. I was using the script to draw a bounding box that followed the mouse around over...
1
by: Tristan Miller | last post by:
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...
7
by: David | last post by:
Hi, I'd really appreciate any help. Im trying to change a label over and over again. I can change it the first time, by using the following code, however it never works again, how can i do this...
3
rblaettler
by: rblaettler | last post by:
Hey I need to position an Icon OVER the right bottom corner of an other CSS element, but with variable height and width. So just absolute positioning would not work. I have something working with...
5
by: Summercool | last post by:
wow... i didn't know that, for <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http:// www.w3.org/TR/html4/loose.dtd"> <span style="width: 100px; background:...
2
by: steven acer | last post by:
i'm illiterate when it comes to javascript and browser issues, i'm trying to code a small help module for my java app.i've went far enough coding all the server side but i'm stuck with javascript...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.