DHTML problem with 2-col + footer CSS Layout

[Xavier Onassis]

I would be grateful for recommendations for a CSS layout (header, 2 cols,
footer) that can accomodate dynamically added elements. I am not having any
luck so far getting this to work in Mozilla/Firefox. Success so far only
with IE. In Mozilla/Firefox, the layout does not adjust when nodes are
inserted into the document dynamically.

Layout:

H E A D E R
COL1 COL2
F O O T E R

Content on the page can change in two ways:

1. User clicks on a link in COL1, which makes a corresponding DIV in COL2
visible and the others there invisible.
The DIVS in COL2 are not all the same length. Sometimes the visible DIV will
have 10 lines, say, and at others, 20.
Mozilla/Firefox handles this OK.

2. COL2 also contains an expanding menu. When the user clicks on a menu-item
in COL2, dynamic HTML content is fetced from the database and injected into
COL2 below the clicked-on link: an element containing nodes is added to the
DIV using .insertBefore method. The dynamic insertion of the element causes
the length of COL2 to change dramatically.
Mozilla/Firefox does not handle this. When HTML is added dynamically to
COL2, the FOOTER DIV (in Firefox) stays just where it was, and the
dynamically injected content overwrites the footer and extends down below
it. The footer is acting as though it were absolutely positioned. The FOOTER
DIV's vertical position should adjust according to the new length of COL2.

Thanks in advance
Xav

[Els]

Xavier Onassis wrote:

I would be grateful for recommendations for a CSS layout
(header, 2 cols, footer) that can accomodate dynamically
added elements. I am not having any luck so far getting
this to work in Mozilla/Firefox. Success so far only with
IE. In Mozilla/Firefox, the layout does not adjust when
nodes are inserted into the document dynamically.

Layout:

H E A D E R
COL1 COL2
F O O T E R

[snip long story without relevant information]

A url would actually show the problem, while this story
doesn't tell us anything. It doesn't even say what your HTML
looks like, or if you used CSS to position any part of that
page.
The only thing I can deduct is that you didn't give the footer
position:absolute.

However, your problem seems pretty common, and the answer will
most likely contain the words "add an element with
'clear:both'".
Depending on your code and the look of your page, this could
possibly be followed by the words "before the end of COL2" or
"right before the footer". Or these two groups of words could
be replaced by "add clear:both to the styles for the footer".

And still, this might not be the right answer at all.
Or it may seem like the right answer when you check one of
these options in Firefox, until you have a look in an older
Mozilla or Netscape browser. No way to tell without a url.

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Now playing: Nazareth - This Flight Tonight

[Xavier Onassis]

Sorry, I cannot provide a URL at this point. The problem is on an internal
page of our company webserver and involves a database. I understand that
lack of a URL makes it very difficult to help and am grateful that you took
a crack at solving the problem anyway. For anyone else who may have seen
this problem, I will try to make a long story short.

My column2 contains a treeview. When the page first displays, everything is
OK. Header, Col1, Col2, and Footer are all in the right place. When a
treenode is clicked for the first time, its children nodes are fetched from
a database and corresponding HTML elements (DIVs) are inserted into the
document as children of the clicked node (also a DIV):

<DIV class='treenode'></DIV>
<DIV class = 'treenode'> <!--this node has been expanded by the user and so
contains child elements-->
<DIV class='fetchedtreenode'> </DIV>
<DIV class='fetchedtreenode'> </DIV>
<DIV class='fetchedtreenode'> </DIV>
ET CETERA...
</DIV>

Thus, col2's contents "grow" dynamically at runtime. This is where the
problem enters. In Mozilla/Firefox, the fetched nodes display where they
should, but the footer is behaving as though it has been given a
POSITION:ABSOLUTE style, but it hasn't:

#ftr {clear: both; height : 25px;
position: relative;
background : #c0c0c0;
color : #333333;
border : medium solid black;
border-width : 1px 0 0;
margin : 0;}

The footer is staying put even as col2 expands, and the effect is that some
of the fetchedtreenodes display below the footer.
Regards
Xavier

"Els" <el*********@tiscali.nl> wrote in message
news:Xn*****************@130.133.1.4...

Xavier Onassis wrote:

I would be grateful for recommendations for a CSS layout
(header, 2 cols, footer) that can accomodate dynamically
added elements. I am not having any luck so far getting
this to work in Mozilla/Firefox. Success so far only with
IE. In Mozilla/Firefox, the layout does not adjust when
nodes are inserted into the document dynamically.

Layout:

H E A D E R
COL1 COL2
F O O T E R

[snip long story without relevant information]

A url would actually show the problem, while this story
doesn't tell us anything. It doesn't even say what your HTML
looks like, or if you used CSS to position any part of that
page.
The only thing I can deduct is that you didn't give the footer
position:absolute.

However, your problem seems pretty common, and the answer will
most likely contain the words "add an element with
'clear:both'".
Depending on your code and the look of your page, this could
possibly be followed by the words "before the end of COL2" or
"right before the footer". Or these two groups of words could
be replaced by "add clear:both to the styles for the footer".

And still, this might not be the right answer at all.
Or it may seem like the right answer when you check one of
these options in Firefox, until you have a look in an older
Mozilla or Netscape browser. No way to tell without a url.

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Now playing: Nazareth - This Flight Tonight

[Martin!]

(topposting sucks but inconsistancy sucks even harder)

it is indeed difficult to make a complete picture of your problem this
way. it would indeed be a lot better if you would at least show a layout
example or 2 (with/without problem) (even preferable when you leave the
company content out).

but question : why do you have position: relative; in your #ftr ?
and, did you have a look at
http://www.alistapart.com/articles/footers/ ?
(although i dont find this footer example very practical)

gl
martin


Xavier Onassis wrote:

Sorry, I cannot provide a URL at this point. The problem is on an internal
page of our company webserver and involves a database. I understand that
lack of a URL makes it very difficult to help and am grateful that you took
a crack at solving the problem anyway. For anyone else who may have seen
this problem, I will try to make a long story short.

My column2 contains a treeview. When the page first displays, everything is
OK. Header, Col1, Col2, and Footer are all in the right place. When a
treenode is clicked for the first time, its children nodes are fetched from
a database and corresponding HTML elements (DIVs) are inserted into the
document as children of the clicked node (also a DIV):

<DIV class='treenode'></DIV>
<DIV class = 'treenode'> <!--this node has been expanded by the user and so
contains child elements-->
<DIV class='fetchedtreenode'> </DIV>
<DIV class='fetchedtreenode'> </DIV>
<DIV class='fetchedtreenode'> </DIV>
ET CETERA...
</DIV>

Thus, col2's contents "grow" dynamically at runtime. This is where the
problem enters. In Mozilla/Firefox, the fetched nodes display where they
should, but the footer is behaving as though it has been given a
POSITION:ABSOLUTE style, but it hasn't:

#ftr {clear: both; height : 25px;
position: relative;
background : #c0c0c0;
color : #333333;
border : medium solid black;
border-width : 1px 0 0;
margin : 0;}

The footer is staying put even as col2 expands, and the effect is that some
of the fetchedtreenodes display below the footer.
Regards
Xavier

"Els" <el*********@tiscali.nl> wrote in message
news:Xn*****************@130.133.1.4...

Xavier Onassis wrote:

I would be grateful for recommendations for a CSS layout
(header, 2 cols, footer) that can accomodate dynamically
added elements. I am not having any luck so far getting
this to work in Mozilla/Firefox. Success so far only with
IE. In Mozilla/Firefox, the layout does not adjust when
nodes are inserted into the document dynamically.

Layout:

H E A D E R
COL1 COL2
F O O T E R

[snip long story without relevant information]

A url would actually show the problem, while this story
doesn't tell us anything. It doesn't even say what your HTML
looks like, or if you used CSS to position any part of that
page.
The only thing I can deduct is that you didn't give the footer
position:absolute.

However, your problem seems pretty common, and the answer will
most likely contain the words "add an element with
'clear:both'".
Depending on your code and the look of your page, this could
possibly be followed by the words "before the end of COL2" or
"right before the footer". Or these two groups of words could
be replaced by "add clear:both to the styles for the footer".

And still, this might not be the right answer at all.
Or it may seem like the right answer when you check one of
these options in Firefox, until you have a look in an older
Mozilla or Netscape browser. No way to tell without a url.

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Now playing: Nazareth - This Flight Tonight

[Els]

Martin! wrote:

Xavier Onassis wrote:

"Els" <el*********@tiscali.nl> wrote in message
news:Xn*****************@130.133.1.4...

Xavier Onassis wrote:

(topposting sucks but inconsistancy sucks even harder)
That's when you 'correct' the toppost, as I've done below:
Message to OP: please type your reply below the stuff you're
replying to.
I would be grateful for recommendations for a CSS layout
(header, 2 cols, footer) that can accomodate dynamically
added elements. I am not having any luck so far getting
this to work in Mozilla/Firefox. Success so far only with
IE. In Mozilla/Firefox, the layout does not adjust when
nodes are inserted into the document dynamically.

Layout:

H E A D E R
COL1 COL2
F O O T E R

[snip long story without relevant information]

A url would actually show the problem

Sorry, I cannot provide a URL at this point. The problem
is on an internal page of our company webserver and
involves a database. I understand that lack of a URL makes
it very difficult to help and am grateful that you took
a crack at solving the problem anyway. For anyone else who
may have seen this problem, I will try to make a long
story short.

My column2 contains a treeview.
That's most likely irrelevant.
When the page first
displays, everything is OK. Header, Col1, Col2, and Footer
are all in the right place. When a treenode is clicked for
the first time, its children nodes are fetched from a
database and corresponding HTML elements (DIVs) are
inserted into the document as children of the clicked node
(also a DIV):

<DIV class='treenode'></DIV>
<DIV class = 'treenode'> <!--this node has been expanded
by the user and so contains child elements-->
<DIV class='fetchedtreenode'> </DIV>
<DIV class='fetchedtreenode'> </DIV>
<DIV class='fetchedtreenode'> </DIV>
ET CETERA...
</DIV>

Thus, col2's contents "grow" dynamically at runtime. This
is where the problem enters. In Mozilla/Firefox, the
fetched nodes display where they should, but the footer is
behaving as though it has been given a POSITION:ABSOLUTE
style, but it hasn't:

#ftr {clear: both; height : 25px;
position: relative;
background : #c0c0c0;
color : #333333;
border : medium solid black;
border-width : 1px 0 0;
margin : 0;}

The footer is staying put even as col2 expands, and the
effect is that some of the fetchedtreenodes display below
the footer.

And what is the value for the position property for those
expanded divs? And for any other code in that 2nd column?
it is indeed difficult to make a complete picture of your
problem this way. it would indeed be a lot better if you
would at least show a layout example or 2 (with/without
problem) (even preferable when you leave the company
content out).

And then still there's no way of knowing what the OP is doing,
as it only shows what he wants and what happens, but not why.
The minimum will have to be the code and the CSS.

--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

[Xavier Onassis]

OK. I will try to put something together that demonstrates the issue. In the
meantime, a followup question. Does a dynamically inserted element inherit
the styles of its parent element if it has no styles of its own?
Xavier

[Steve Pugh]

"Xavier Onassis" <xa***********@nospam4me.com> wrote:

Does a dynamically inserted element inherit
the styles of its parent element if it has no styles of its own?

If those styles are inheritable, yes.

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <st***@pugh.net> <http://steve.pugh.net/>

[Xavier Onassis]

Thank you, Steve.

I have discovered the cause of the problem in Mozilla/Firefox. I had been
setting the width of the dynamically inserted child element to 100%,
thinking that this CSS would be interpreted to mean 100% of the parent
container. When I removed that width instruction, the dynamically inserted
DIV's contents no longer extend below the footer.

Xavier
"Steve Pugh" <st***@pugh.net> wrote in message
news:ri********************************@4ax.com...

"Xavier Onassis" <xa***********@nospam4me.com> wrote:

Does a dynamically inserted element inherit
the styles of its parent element if it has no styles of its own?

If those styles are inheritable, yes.

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <st***@pugh.net> <http://steve.pugh.net/>