Member Avatar for ggeoff

Hi

My website works OK in IE9, Safari, Opera and Chrome but Firefox objects to my Contacts page. The contact form position is wrong and the navigation does not work for the Contacts page. The other pages work ok. Both HTML and CSS validate ok

Edited by ggeoff because: added Opera to list of browsers tested
  • 2 Contributors
  • 4 Replies
  • 210 Views
  • 3 Weeks Discussion Span
  • Latest Post Latest Post by ggeoff

Dani AI

Generated

This thread shows a classic cross‑browser layout mismatch: a positioned element used for layout ended up sitting over the navigation and intercepting clicks in Firefox, while other engines tolerated the markup. correctly pointed to the overlapping positioned element and suggested a z‑index fix; later confirmed that removing the table-based layout removed the problem. Below are concise, practical explanations and immediate steps to prevent the same issue.

Browsers treat table layout and positioned boxes differently. Table cells are governed by the table formatting model, so properties intended for positioned boxes (top/left offsets, negative pixel hacks) can behave inconsistently when applied to table elements or their cells. When a positioned element overlays another, it captures mouse events even if it appears visually “behind” — stacking context and z‑index rules control both painting order and hit testing. Firefox (Gecko) is stricter about these rules than some other engines, so invalid or hacky CSS often breaks there first.

Quick troubleshooting checklist you can apply now:

  1. Inspect the page with Firefox DevTools → Inspector → Computed/Box Model. Check which element is covering the nav and its z‑index.
  2. Temporarily add visible outlines to major regions to reveal overlaps.
  3. Try forcing the nav above overlays as a quick test (then fix layout properly): 
#mainNav {
  position: relative;
  z-index: 9999;
}
  1. Replace table layout for the form with simple block/flex/grid containers — this is the long‑term fix. Validate HTML (unclosed tags or quirks mode make engines behave unpredictably) and remove unused/commented IDs that confuse debugging.

Best practices: avoid using tables for layout, stop using negative offsets as positioning hacks, scope layout CSS to component wrappers, and test with a current Firefox profile (extensions can sometimes interfere). The root cause here was layout technique, and removing the table — as did — is the correct, maintainable solution.

Recommended Answers

All 4 Replies

Member Avatar for Taywin

From what I see on FF, your div element with ID 'content' has left value of -245px in the CSS. Where did it come from?

The table element id 'table1' has top as -500px also. As a result, your form table is hanging up there and cover the navigation link (which means you can't click on the navigation link). You could always force the z-index of navigation to be high value, so that it is always on top of any elements.

When you design something like this, try to apply your CSS in its own child node. If you create CSS with both global and local and apply across the whoel page, you may get unexpected results.

Edited by Taywin
Member Avatar for ggeoff

Hi Taywin. The site works perfectly in all the standard browsers Every element is placed correctly. The problem is firefox. Firefox:

  1. misplaces the Form
  2. disables the navigation links
  3. takes the footer and places it in or over the Form links in the form and the footer links still work.

I found that the id for the table is not styled in the external CSS form so I have removed it. But left the code commented out. The id "content" is also not styled in the external stylesheet If I remove the id it alters the layout of the page on the other browsers.

The site is over a year old and I must have checked Firefox when I originally uploaded it. So, there has been an upgrade to firefox that has screwed up my website, or soemhow I failed to test it. The fact remains that the site is ok in IE9, Chrome, Safari and Opera.

Member Avatar for ggeoff

Correction: the content ID is styled in the external sheet in #outerWrapper #contentWrapper #content.

The -245px is in that declaration block.

Member Avatar for ggeoff

I have found that I was using a single table and there was a rule to add location to a table cell via the CSS. Firefox didn't regard that as valid and so ignored it. I removed the table and the site now works fine.

Edited by ggeoff because: typo
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.