<DIV> positioning handled differently in IE vs Firefox

This URL http://www.brainspawn.com/products/forte/Manual_1_4/index.html is displayed differently in Firefox (and other Mozilla based browsers) than it is under IE.  The problem is the navigation bar.  Under IE it is correctly positioned inside a table, close to the center of the page.  Under Firefox it is positioned outside its enclosing table at the top left of the page.  I imagine this is an IE issue as the nav bar is positioned using <DIV position:absolute> tags, which under IE seem to postion the elements relative to the table, but absolute to each other, while Firefox positions them absolute to the page, which I think is actually correct.  So my question is, how can this be coded to work correctly in both browsers, positioning the elements as they are currently displayed only under IE?
ghead1Asked:
Who is Participating?
 
COBOLdinosaurConnect With a Mentor Commented:
Actually it is a case of IE being wrong, invalid and breaking the document object.

The only elements that legally and logically can be children to the table element are: tbody, tfoot, thead, and tr.

What IE is doing make use of the DOM methods with any reliablility impossible because the rowindex becomes irrelevant and the childNodes object is invalidated.  Mozill preserves the integrity of the DOM by making the div independent and a child of the body.

In some older Non-IE browsers that would have crashed the browser, whereas modern browsers try to come up with some rendering no matter how bad the code is malformed.

Using the conversion tool may turn out to be false economy.  The extra time it takes to maintain and debug the code may end up being more that the time it would have take to build a stylesheet and templates to present the content.

Cd&
0
 
COBOLdinosaurCommented:
Just use relative position and set the top and leftto position relative to the containing cell.  Get used to those kind of problems.  Using table for layout and creating something that rigid means it is always going to be a challenge to maintain.

Cd&
0
 
ghead1Author Commented:
Yes, this page and the other 'manual' pages are a nightmare.  All these pages are converted from either Word or Powerpoint files using a third party tool.  I really didn't feel like recreating the entire manual in HTML so opted for a quick and 'easy' conversion instead.

I've found a different solution than what you provided but was hoping you could confirm this for me.  The table that encloses the NAV bar I'm having problems with is declared as follows:

<table id="pageTable" width="620" STYLE="position: relative; left: auto; top: auto;">

It appears that IE makes this table the parent, or 'containing block' of the enclosed DIV tags while Mozilla does not.  If I include a new DIV tag like:

<div STYLE="position: relative; left: auto; top: auto;">

just after the table declaration which wraps all the other DIV's everything works fine in both IE & Mozilla.  

To quote from the CSS spec:  "Definition of "containing block" If the element has 'position: absolute', the containing block is established by the nearest ancestor with a 'position' other than 'static' ... If there is no such ancestor, the content edge of the root element's box establishes the containing block."  

So it appears to me as if IE is setting the 'containing block' of the DIV tags to the table, while Mozilla isn't.   Is this actually a case where IE got something right and Mozilla got it wrong?  Or am I at fault for putting the style in the table tag rather than the TD tag?
0
 
ghead1Author Commented:
OK.  That makes sense.  I would have been surprised if IE had it right.

Thanks for your help.
0
 
COBOLdinosaurCommented:
Glad I could help.  Thanks for the A. :^)

Cd&
0
All Courses

From novice to tech pro — start learning today.