Member Avatar for chriselectrix

Hi All

For some reason my web page isnt working properly in Firefox 3.6.16.

Here is the link http://www.electrix.co.uk/home.php?lang=en

The flags along the top work perfectly well in IE (when you click on them they take you to a different link).

However in Firefox, the pointer doesn't even change when you mouse over the buttons.

Does anyone have a suggestion?

Thanks,


CHRIS

  • 4 Contributors
  • 6 Replies
  • 122 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by migcosta

Dani AI

Generated

correctly spotted that the flag area is not behaving as a normal, clickable container and and were on the right track pointing at the header/layout overlap. The practical symptom — links work in IE but not in Firefox — is almost always caused by another element sitting over the buttons so Firefox blocks the pointer events. IE can be more forgiving about those overlaps, which is why the behaviour differs between browsers.

Diagnosis is best done with the browser inspector: use the element picker to see which element the mouse is actually over, check computed box sizes and stacking order, and temporarily toggle visibility on the header block to see whether clicks start working. Another quick test is to disable pointer handling on a suspected overlay (via the inspector) to confirm it is the blocker.

Two reliable fixes that avoid brittle inline hacks are: 1) make the flags container properly contain its floated/inline children (so it has real height) by applying a clearfix or creating a block formatting context; 2) adjust the header spacing so it no longer overlaps the flags (use margin instead of forcing layout that causes stacking). If needed, set a stacking context and z-index so the flags are clearly on top.

Example clearfix (drop into the stylesheet for the flags container):

.flags::after {
  content: "";
  display: table;
  clear: both;
}

If confirming an overlay is the problem, a temporary pointer-events test can prove it (via devtools). For background reading on hit testing and stacking, see the CSS documentation on pointer-events and z-index: pointer-events and z-index. Avoid inline styles for layout; modern layout methods (flexbox/grid) also prevent these kinds of overlay bugs.

Recommended Answers

All 6 Replies

Member Avatar for svilla

Remove the style="height:0px" from the flags div.

Member Avatar for chriselectrix

Genious!

Thank you very much.

Member Avatar for ko ko

Solved ? Mark this thread as 'Solved' and let us know that this thread is clear.

Member Avatar for chriselectrix

Its not actually solved - when I remove the style="height:0px", the words 'Stainless Steel Cable Management Systems' drop down.

Member Avatar for ko ko

1. Remove 'height: 0px;' from 'flags'.
2. Remove 'padding-top:' from 'h2' inside 'headerright'.

Member Avatar for migcosta

change the headerright padding to margin..
you have div headerright on top of the flags div..

this is a quick solution for your problem.. but you should reconsider you css styles for that part of the site.. :)

best regards

Edited by migcosta because: n/a
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.