Member Avatar for serkan sendur

i have a relative positioned container <td> element and i have an absolutely positioned <object> element within it, it displays perfectly in IE but sucks in firefox, what should i do to get around this problem?

  • 4 Contributors
  • 4 Replies
  • 127 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by enque

Dani AI

Generated

Older browsers and plugin elements can make absolute positioning behave differently inside table cells. The quickest, non-invasive fixes are: ensure a standards DOCTYPE, avoid positioning the <object> directly against a table cell, and give the object a block display and an explicit z-index. Wrapping the plugin in a positioned block-level container makes the containing block explicit and is reliable across Firefox and IE. See MDN on the CSS position model and the concept of a containing block for the spec behavior.

A practical pattern that usually fixes cross-browser quirks:

<td>
  <div class="pos-wrap">
    <object id="myObject" data="..."></object>
  </div>
</td>

.pos-wrap { position: relative; }
.pos-wrap object { position: absolute; top: 10px; left: 10px; display: block; z-index: 10; }

When debugging, try these steps in order:

  • Validate the page DOCTYPE so browsers use standards mode.
  • Replace the <object> temporarily with a plain <div> to see whether the plugin/replaced element is the problem.
  • Use the browser inspector or run console.log(document.getElementById('myObject').offsetParent) to confirm which element is acting as the containing block.
  • Check computed margins/padding on ancestor elements (as suggested) and remove unexpected offsets.
  • If necessary, compute positions in JS on resize using getBoundingClientRect() and set style.left/top as a last resort.

As recommended, moving away from table-based layout to a CSS layout will make positioning more predictable. If a wrapper is not possible, anchor the absolutely positioned element to a non-table ancestor or update its coordinates via a small resize handler. These steps address the common differences reported by and will help isolate whether the issue is the table cell, the <object> itself, or browser rendering mode.

Recommended Answers

All 4 Replies

Member Avatar for plgriffith

I would recommend using CSS, but I'm sure you can fix this problem without doing so. I don't use tables, so I am not familiar with the problem.

Member Avatar for ndeniche

may we see some part of your code?

Member Avatar for serkan sendur

i can tell you what i want with absolute positioning ; i want to locate a div to a specific position on the page, even if the page gets resized the div will stick to its container div, so i set parent div's position to relative and the child div is absolutely positioned to the parent div. this works perfectly in internet explorer but doesnt work in firefox.

Member Avatar for enque

what is the parent div contained in? Sometimes padding and margins set by other elements around it can cause it to shift. This of course is due to FF and IE rendering these differently.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.