Member Avatar for phpDave

Hi, I'm about finished with my first website. Everything works in firefox and IE except that the horizontal scroll bar appears in IE. I set the overflow to hidden and it works except I lose the verticle scrollbar in firefox, any suggestions?
Also, I should be testing with Safari soon and wanted to ask what should I expect? Is Safari close to Firefox? Thanx.

  • 3 Contributors
  • 3 Replies
  • 96 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by phpDave

Dani AI

Generated

Short, practical follow‑up for that builds on points from and without changing the page root wholesale.

Start by locating the offender. Run this in the page console to list any elements whose content is wider than their visible box:

[].forEach.call(document.querySelectorAll('*'), function(el){
  if (el.scrollWidth > el.clientWidth) console.log(el);
});

That points to the exact element creating horizontal overflow. In the dev tools look at computed width, margin and padding, and whether an image, long word, negative margin or an offscreen positioned element is extending beyond the layout. See how scrollWidth compares to clientWidth for clues: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollWidth

Common, safe fixes (apply to the specific container, not the whole document):

img { max-width: 100%; height: auto; }
.container {
  box-sizing: border-box;
  overflow-x: hidden;   /* hide horizontal scroll only */
  overflow-y: auto;     /* preserve vertical scrolling */
}

Use overflow-x: hidden instead of overflow: hidden when you only want to remove the horizontal bar, and overflow-y: scroll if you want a persistent vertical scrollbar to avoid layout shifts. box-sizing: border-box helps avoid width math surprises. Docs: https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-x and https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

About Safari: it shares a WebKit/Blink lineage with Chrome so many fixes carry over, but differences remain (form controls, scrollbars, OS-specific rendering). Test on a real Safari or a reliable cloud tester rather than assuming parity with Firefox. If supporting legacy IE only for a specific bug, target those versions with narrowly scoped rules instead of global overflow changes.

Recommended Answers

All 3 Replies

Member Avatar for Member #120589

gecko (NS/FF) and webkit (Chrome/Safari) are similar coz they're standards compliant. IE sucks (even 8). I won't start to rant.

What is the overflow element? The whole page? This isn't a good idea.

If just an element, fiddle with the width/height.

There again, you could try this:

html { overflow: -moz-scrollbars-vertical; }

for FF.

I don't know if webkit has a similar property.

Member Avatar for Froger93

As @ardav said not sure what you are putting the overflow on, the issue with IE is that the browser window is a different size you need to make sure that if your site is a fixed size it is under 930px or if it is a fluid width then it needs to be 100% with the overflow set to none ON THE CONTAINING DIV not any HTML or BODY element.

Member Avatar for phpDave

Thanks for the replies.

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.