CSS : overflow : auto will not work under FireFox 3.6.2

Question

Hello everyone:

This is a CSS related question, I got one good answer from my previous question, which suggested the use of some CSS code like overflow:auto together with a fixed height container.

And here is my actual implementation : on uni server

If by any chance you cannot access that server, try this

Please follow the instructions on screen and buy more than 4 kinds of tickets.

If you are using IE8, Opera, Safari, Chrome, you would notice that the lower right corner of the page now has a vertical scroll bar, which scrolls the content inside it and prevent it from overflowing. That's what I want to have in this section.

Now the problem is, this would not do in FireFox 3.6.2. Am I doing something not compliant to the CSS standard or FireFox has its own way of overflow control?

You can inspect the elements on screen, and all controlling functions are done in one javascript using jQuery. All CSS code is kept in a separated file as well.

According to the professor, FireFox would be the target browser, although the version was set to 2.0...

Answer 1

It seems you have to set a height / overflow to the <tbody> tag, not just the table (or maybe not the table at all, didn't test that).

So...

tbody { height: 130px; overflow: auto; }

And I specifically tested with "height", it seemed "max-height" didn't work as intended. Very odd behavior, indeed.

Answer 2

Have you tried overflow: scroll?