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">&nbsp;</div> 


The above HTML code will be displayed by Firefox 3, Firefox 2, IE7, Opera 9 and Safari 3 as follows:

how browsers display scrollable elements with padding

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.

About the Author

Iana Tsolova

is Product Manager at Telerik’s DevTools division. She joined the company back in the beginning of 2008 as a Support Officer and has since occupied various positions at Telerik, including Senior Support Officer, Team Lead at one of the ASP.NET AJAX teams and Technical Support Director. Iana’s main interests are web development, reading articles related to geography, wild nature and latest renewable energy technologies.

Related Posts


Comments are disabled in preview mode.