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]

Re: DHTML problem with 2-col + footer CSS Layout

Xavier Onassis wrote:
[color=blue]
> 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[/color]

[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:absolu te.

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]

Re: DHTML problem with 2-col + footer CSS Layout

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='fetchedt reenode'> </DIV>
<DIV class='fetchedt reenode'> </DIV>
<DIV class='fetchedt reenode'> </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:ABSOLU TE 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 fetchedtreenode s display below the footer.
Regards
Xavier

"Els" <els.aNOSPAM@ti scali.nl> wrote in message
news:Xns9619AD8 55323FEls@130.1 33.1.4...[color=blue]
> Xavier Onassis wrote:
>[color=green]
> > 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[/color]
>
> [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:absolu te.
>
> 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[/color]

[Martin!]

Re: DHTML problem with 2-col + footer CSS Layout

(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:
[color=blue]
> 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='fetchedt reenode'> </DIV>
> <DIV class='fetchedt reenode'> </DIV>
> <DIV class='fetchedt reenode'> </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:ABSOLU TE 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 fetchedtreenode s display below the footer.
> Regards
> Xavier
>
> "Els" <els.aNOSPAM@ti scali.nl> wrote in message
> news:Xns9619AD8 55323FEls@130.1 33.1.4...
>[color=green]
>>Xavier Onassis wrote:
>>
>>[color=darkred]
>>>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[/color]
>>
>>[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:abso lute.
>>
>>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[/color]
>
>
>[/color]

[Els]

Re: DHTML problem with 2-col + footer CSS Layout

Martin! wrote:[color=blue]
> Xavier Onassis wrote:[color=green]
>> "Els" <els.aNOSPAM@ti scali.nl> wrote in message
>> news:Xns9619AD8 55323FEls@130.1 33.1.4...[color=darkred]
>>> Xavier Onassis wrote:[/color][/color][/color]
[color=blue]
> (topposting sucks but inconsistancy sucks even harder)[/color]

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.
[color=blue][color=green][color=darkred]
>>>>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[/color]
>>
>> 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.[/color][/color]

That's most likely irrelevant.
[color=blue][color=green]
>> 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='fetchedt reenode'> </DIV>
>> <DIV class='fetchedt reenode'> </DIV>
>> <DIV class='fetchedt reenode'> </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:ABSOLU TE
>> 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 fetchedtreenode s display below
>> the footer.[/color][/color]

And what is the value for the position property for those
expanded divs? And for any other code in that 2nd column?
[color=blue]
> 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).[/color]

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]

Re: DHTML problem with 2-col + footer CSS Layout

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]

Re: DHTML problem with 2-col + footer CSS Layout

"Xavier Onassis" <xavieronassis@ nospam4me.com> wrote:
[color=blue]
>Does a dynamically inserted element inherit
>the styles of its parent element if it has no styles of its own?[/color]

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 <steve@pugh.net > <http://steve.pugh.net/>

[Xavier Onassis]

Re: DHTML problem with 2-col + footer CSS Layout

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" <steve@pugh.net > wrote in message
news:ribg315s71 giqsvgn0jq8p0nb frje4fvgm@4ax.c om...[color=blue]
> "Xavier Onassis" <xavieronassis@ nospam4me.com> wrote:
>[color=green]
> >Does a dynamically inserted element inherit
> >the styles of its parent element if it has no styles of its own?[/color]
>
> 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 <steve@pugh.net > <http://steve.pugh.net/>[/color]