Solved

<DIV> positioning handled differently in IE vs Firefox

Posted on 2004-04-06
5
2,919 Views
Last Modified: 2007-12-19
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?
0
Comment
Question by:ghead1
  • 3
  • 2
5 Comments
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 10768449
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
 

Author Comment

by:ghead1
ID: 10769276
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
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 300 total points
ID: 10769995
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
 

Author Comment

by:ghead1
ID: 10770143
OK.  That makes sense.  I would have been surprised if IE had it right.

Thanks for your help.
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 10770385
Glad I could help.  Thanks for the A. :^)

Cd&
0

Featured Post

Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
How to refresh a page from a sub domain in ajax ? 34 47
Need output in powershell ( Vertical format) 2 34
Sending ASP to server side 8 32
Use "if not" in a condition 2 19
This article discusses four methods for overlaying images in a container on a web page
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: blockā€¦
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

733 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question