CSS relative positioning problem

[bjnst6]

fellow coders,

i've got this style sheet problem i've been fumbling with for awhile, and although it shouldn't be hard...no one can answer it for me yet...

now i've attached the code for the page and the style sheet as well. as you can see i've nested the div tags so the events and officers box will slide down as the description gets dynamically bigger (or up if smaller). this works fine. however, when the events box gets dynamically bigger or smaller, the officer box won't stay put vertically. it slides up and down as the events box changes sides.

thanks for your time all who try!

b

just change the .cs extension to a .cfm and you should be ready to roll.

[websmith99]

Similarly, I am looking for help in printing absolutely postitioned
content in IE5.5

please see my posting

thanks

[Waldo2k2]

dude, what the heck is in that file????
i've tried to download it twice and each time it crashes my internet explorer, then everything else connected to the web, and eventually i have to restart it gets so bad (which i have to use the restart button for because .dll's keep crashing when i try to shutdown through windows)
the first time i thought it was a fluke, but i tried again and it wasn't, so upload it as a .txt file and then let us save it as a .cfm (by the way what is that again anyway?)

[websmith99]

I don't think you can view a .cfm (Cold Fusion) file in your browser saved locally to your PC unless you are using an SDK set up for magnus-internal/cold-fusion mime types.

I think this is why Waldo2k2's PC crashed.

Isn't that true bjnst6? IF so, you should strip out the cold fusion tags and provide the link again as an HTML file (after all this problem concerns CSS anyway)

[bjnst6]

sorry guys. yeah, it's a cold fusion extension. i've never had problem's veiwing them in any text editor or other editing program before (just add the .cfm to the viewable extension list). but here's the file with just html anyway, should have done this the first time, you're right!! thanks guys.

it's a .txt file now...just make it .html

[Waldo2k2]

It's an optical illusion, the officers box is NOT moving. However, when the events box grows, it grows from the bottom extent upward, so it appears as though the officers box is moving. Taking this into consideration, there should be something you can do to keep the events box from growing upward...i suggest inserting a div between the two giving it a stylesheet height and width...that may keep a buffer between the two...also with the stylesheet properties of the events box, you may want to use bottom as the positioner instead of top....use javascript to get the page height, then do some subtraction and wallah! Basically i think this is why it grows up and not down. Good luck.

[bjnst6]

i've tried placing the div with the height and width between the events and officers box. that didn't work. but i'm not quite sure what you mean abou getting the height with the javascript...why would i want to do that again? to get the offset? sorry, man...i'm slow.

thanks.
b

[Waldo2k2]

no problem, sometimes i think i spit out too much info at once...
basically, what were trying to accomplish is a fix to your bug, at this point we should just worry about getting it working, then later worry about getting it working for older browsers. The w3c DOM includes new properties of the position attribute. You can now position something from the right and bottom instead of just the top and left. I think because of the inner workings of javascript, html, and css, the box grew up because it was positioned from the top of the page. We could position it from the bottom as well. Here's where it gets a little more advanced.
Consider this, you position the box 450 px from the bottom (arbitrary number) and it puts it just where you want it. But, after unveiling your site to the world, you begin to add content to the main page. All of a sudden your box is in the middle of the page and it's covering your text. That is because the height of the page grew, and the bottom got farther away, therefore the box moved....so, we must position the box dynamically.

var fromTop=20;//whatever it's positioned from the top now
//change div class to id, it's not necessary to use a class in this case, and it can't be manipulated like an id can.
var heightOTheBox=parseInt(document.all.eventStateContainer.height);//get the height of the box, since it changes dynamically as well
var theBottom=parseInt(document.body.clientHeight);//IE specific way to get the height of the document
var fromTheBottom=theBottom-(fromTop+heightOTheBox);//you must subract the height of the box and it's distance from the top of the page to get the correct baseline position from the bottom
//now when the body loads, position the box
function moveTheBox()
{
document.all.eventStateContainer.style.bottom=fromTheBottom;
}
...
...
<body onload="javascript:moveTheBox()">
...


now if i was right and it had to do with growing upward, then this should solve all your problems....if not...well then we'll try something else.


On a side note....i noticed some peculiarites in your code that i overlooked the first time....what is the point of all this:

.officerContainer
{position: relative;
top: -346px;
left: 328px;}
.tournamentContainer
{position: relative;
top: -184px;
left: 0px;}

what's up with the negative values???? They aren't coded THAT far down the page are they?

[websmith99]

Negative values can come in handy if you want the element to start offscreen and move into view.