472,978 Members | 2,314 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

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

DHTML problem with 2-col + footer CSS Layout

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

Jul 21 '05 #1
7 2872
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 vo. O resto imperfeito.
- Renato Russo -
Now playing: Nazareth - This Flight Tonight
Jul 21 '05 #2
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 vo. O resto imperfeito.
- Renato Russo -
Now playing: Nazareth - This Flight Tonight

Jul 21 '05 #3
(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 vo. O resto imperfeito.
- Renato Russo -
Now playing: Nazareth - This Flight Tonight


Jul 21 '05 #4
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 vo. O resto imperfeito.
- Renato Russo -
Jul 21 '05 #5
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


Jul 21 '05 #6
"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/>
Jul 21 '05 #7
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/>

Jul 21 '05 #8

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

Similar topics

6
by: egg | last post by:
Dear Sir/Madam, I'm about to start a project, the idea is to have a web interface to let user specify the URL of a target HTML document, based on that URL, retrieved and parsed the HTML document...
2
by: Frances Del Rio | last post by:
please, can you go to http://www.francesdelrio.com/dhtml/ when you click the name of the character the font color for all the lines of that character should change.. this is a simple DHTML...
2
by: mr_burns | last post by:
hi there, i would like a book that will explain concepts of javascript and dhtml instead of, for example, ten tutorials on how to do specific things in js or dhtml. ideally a book thats can...
1
by: Steve | last post by:
Hi; I have heard about a few very good books on DHTML, but the most modern ones seem to have been published in 2002. Have any _significant_ changes in DHTML or the standard DOM happened since...
2
by: | last post by:
Hello All, Could some one send me information on DHTML tutorials where I can leand the differences between html and dhtml. Thanks, ...
1
by: Bob T | last post by:
Hi All, I am a bit of a newbie but have a reasonable grasp of using ASP.net code. One thing I have wanted to find our for sometime is if there is a way to invoke DHTML methods from or after...
17
by: Jacques Jamain | last post by:
hello, in a dhtml page generated from php I want to include a file which is in fact the body of the dhtml page. My hosting ISP does not allow SSI but supports php includes. In the dhtml page, the...
3
by: aspmonger | last post by:
Hello, I really believe that IE 6 has a new (intentional?) bug that severely limits the capability of dhtml and cross domain scripting. Yesterday, I read an interesting article about the subject and...
9
by: ninhovid | last post by:
Hi... i'm new at dhtml, and i want to use it in help windows (instead of window.open() of javascript)... i'm done it... but it works only in internet explorer.. in firefox 2 and 3 it opens the...
2
by: DJRhino | last post by:
Was curious if anyone else was having this same issue or not.... I was just Up/Down graded to windows 11 and now my access combo boxes are not acting right. With win 10 I could start typing...
2
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 4 Oct 2023 starting at 18:00 UK time (6PM UTC+1) and finishing at about 19:15 (7.15PM) The start time is equivalent to 19:00 (7PM) in Central...
0
by: Aliciasmith | last post by:
In an age dominated by smartphones, having a mobile app for your business is no longer an option; it's a necessity. Whether you're a startup or an established enterprise, finding the right mobile app...
0
tracyyun
by: tracyyun | last post by:
Hello everyone, I have a question and would like some advice on network connectivity. I have one computer connected to my router via WiFi, but I have two other computers that I want to be able to...
2
by: giovanniandrean | last post by:
The energy model is structured as follows and uses excel sheets to give input data: 1-Utility.py contains all the functions needed to calculate the variables and other minor things (mentions...
4
NeoPa
by: NeoPa | last post by:
Hello everyone. I find myself stuck trying to find the VBA way to get Access to create a PDF of the currently-selected (and open) object (Form or Report). I know it can be done by selecting :...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 1 Nov 2023 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM) Please note that the UK and Europe revert to winter time on...
0
NeoPa
by: NeoPa | last post by:
Introduction For this article I'll be focusing on the Report (clsReport) class. This simply handles making the calling Form invisible until all of the Reports opened by it have been closed, when it...
4
by: GKJR | last post by:
Does anyone have a recommendation to build a standalone application to replace an Access database? I have my bookkeeping software I developed in Access that I would like to make available to other...

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.