CODEWITHSUNDEEP
htmlcssoverflow
Bantros
Bantros

Reputation: 295

Container overflow, fine in Chrome, weird in IE / FF

I'm having trouble with horizontal scrollbars on my container in IE and FF but everything is fine in Chrome.

The site is 1200px wide, in Chrome when the browser window is below 1200px you get the horizontal scrollbar as you expect but in IE and FF there is a horizontal scrollbar even if the window is above 1200px that scrolls to nothing but white space.

I don't want to set overflow to hidden as then there would be no scrolling at all. There is a fixed header I though could be a problem but it still persists even after making the header absolute.

I think rather than posting snippets of code from a full site I should just link the site in question?

http://www.ekmpowershop21.com/ekmps/shops/collective_ret/index.asp

If someone could shed some light on the issue that would be fantastic. It's more of an annoyance than anything else but would still like to correct my mistake if possible.

Edit: Found a solution, see answers

Upvotes: 0

Views: 143

Answers (2)

Cthulhu
Cthulhu

Reputation: 5235

overflow:hidden; clips the content. However, if the contents don't fit the screen, there will be a scrolling of course. Overflow just clips the contents according to the container dimensions. Just try it and you'll see it works. I just tested on firefox (mac).

UPDATE

Usually if something like this happens if IE / FF, then it has to do with the box model bug. Just add

-webkit-box-sizing: border-box; /* content-box */
-moz-box-sizing: border-box;
box-sizing: border-box;

to your wrap class and you won't need to set the overflow.

Upvotes: 1

Bantros
Bantros

Reputation: 295

Not sure if this is the most elegant solution but I just applied overflow-x: hidden; to my container and it seems to have fixed the issue in both IE and FF. I wonder why it was needed when Chrome was fine without it.

Still I would still appreciate any explanation as I don't know the reason why my solution worked, thanks.

Upvotes: 0

Related Questions