Solved

<DIV> positioning handled differently in IE vs Firefox

Posted on 2004-04-06
5
2,915 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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Suggested Solutions

Things That Drive Us Nuts Have you noticed the use of the reCaptcha feature at EE and other web sites?  It wants you to read and retype something that looks like this.Insanity!  It's not EE's fault - that's just the way reCaptcha works.  But it is …
Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

706 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

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now