Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

<DIV> positioning handled differently in IE vs Firefox

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

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

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

Suggested Solutions

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
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 style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

840 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