The other day I was researching a slight RadGrid header and data cell misalignment when using scrolling with static headers. Finally, it turned out that there is a breaking change in the way Firefox 3 treat scrollable elements with an applied padding style. To be more specific, this browser version does not include the padding zone into the scrollable area, and as a result, the inner area of the element becomes smaller. Safari 2 and 3 behave the same way.
Here is a very simple testing scenario:
| <div style="width:400px"> |
| <div style="width:100px;padding-right:300px;background:orange;overflow:auto"> |
| <div style="width:500px;height:100px;background:yellow"> </div> |
| </div> |
| </div> |
| |
The above HTML code will be displayed by Firefox 3, Firefox 2, IE7, Opera 9 and Safari 3 as follows:
Because of this inconsistent behavior of Firefox 3, for now this browser will continue displaying the small empty rectangle at the top-right corner above the vertical scrollbar when using RadGrid with scrolling and static headers. We will try to think of a better solution in the future.