Solved

<DIV> positioning handled differently in IE vs Firefox

Posted on 2004-04-06
5
2,920 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
[X]
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
  • 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

Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

Question has a verified solution.

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

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.
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

724 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