h2g2 The Hitchhiker's Guide to the Galaxy: Earth Edition

want to talk about DOM

W3C Document Object Model: http://www.w3.org/DOM/
W3Cshools DOM tutorial: http://www.w3schools.com/dom/default.asp
Basic Introductions to Mozilla's DOM Inspector: http://grayrest.com/moz/evangelism/tutorials/dominspectortutorial.shtml & http://www.brownhen.com/DI.html
Mozilla/MSIE Dom compatibility: http://mazinger.technisys.com.ar/pruebas-nick/mozilla/docs/compat.html


DOM stands for Document Object Model, and DOM allows the webmaster generic access - adding, deleting, and manipulating - of all styles, attributes, and elements in a document. It can be accessed via any language available in the browser, including Java, ECMAScript(JavaScript), Ruby, and VBScript (MSIE only). For practicality's sake, the syntax normally used is that of ECMAScript. The DOM is supported most completely in IE 5+ and Gecko (NS6+/Mozilla).

You bored or something?

sounds like a would-be giude entry to me.

-- DoctorMO --

basic intro for those who don't know wot Dom is but are intrested ...

Ah, that would explain it.

I have to admit though, I've never used a DOM.

That's why I started this thread, so we can figure it out and start using it

Oh I have, it's loads of fun, esp the bits of one dom that IE suports and the bits Netscape suport and Mozzila,

I've got some neat little JavaScript functions to add recent DOM functionality to older browsers.

one is a getElementById function, uses the NS .layers for NS 4.8< and IE .all for IE 5.0<,

It's been fun trying to develop things with it thats for sure.

-- DoctorMO --

We have are teacher

Since you brought up the subject...

I'm trying to recreate a page that uses heavily embedded tables with DOM-based CSS positioning. The basic layout is this - a header, 3 columns, and a footer. The 3 columns have varying amounts of content, and they should all line up on the top. Of course, the footer should always be below the tallest column (and it would be awfully nice if the columns all had the same height, based on the tallest column.

Here is a sample page that is based on tables, and is the model for my new page:
http://fas-digiclass.rutgers.edu/page.jsp?dept=french

And here are some preliminary samples using CSS:
http://teachx.rutgers.edu/~jpd/page.html
http://teachx.rutgers.edu/~jpd/page2.html

Ignore the minor spacing problems, gaps in tables etc. My main problem is that footer. If you look at page2.html, you see that it moves up when the center column is shorter than the other two columns.

The main problem that I'm running into here is that when I use absolute positioning, I can't place the footer (using "bottom=" causes overlap) because the DOM ignores the height of absolutely positioned boxes (really it does, look here: http://www.w3.org/TR/CSS2/visudet.html#q17 ). My current solution is to set the center column to relative positioning so that the footer "flows" into a somewhat logical place. If I make all three columns relative, they do not line up at the top (because they remain part of the "flow" and the position is offset from where they would have been placed without positioning, although the footer does remain nicely below the tallest column).

So I'm full of questions, and my head hurts, and I'm tired of reading the W3 documentation. Is there a method using CSS that is escaping me for positioning the footer (and for keeping all the columns the same height based on the content)? Can I use javascript to discover the height of the three columns, and position the footer absolutely based on that (yuck - I want to keep the HTML simple)?

Hint: all of the examples I've seen on the web restrict themselves to two columns, or don't use a footer.

Also the pages seem to look OK in Mozilla 1.2b and in IE 6. They don't look quite right in Chimera which is based on Mozilla 1.0, and I haven't tried anything else. But one problem at a time.

looks ok from here,

sorry I can't be much help.

-- DoctorMO --