I have a page banner that is fixed on the top of the web site regardless the scroll position of the window:
<div id="DivHeader" runat="server" style="position: fixed; top: 0; left: 0; right: 0;">
<asp:Table ...>
content
</asp:Table>
</div>
Then I have a long table with the RadDockZones and RadDocs controls underneath the header. Then when I scroll down, the table along with the table content hides behind the banner as it suppose to do. As you can see half of the word "sdfsdf" hides behind the banner along with the table borders. However the telerik ajax controls don't. And it's even not only the RadDock that does not hide behind the banner. It's also the telerik menu control as you can see in the upper left corner of the screen shot.
Any idea how i can get around this problem?
This only has to work in IE7.
Thank you very much.
<div id="DivHeader" runat="server" style="position: fixed; top: 0; left: 0; right: 0;">
<asp:Table ...>
content
</asp:Table>
</div>
Then I have a long table with the RadDockZones and RadDocs controls underneath the header. Then when I scroll down, the table along with the table content hides behind the banner as it suppose to do. As you can see half of the word "sdfsdf" hides behind the banner along with the table borders. However the telerik ajax controls don't. And it's even not only the RadDock that does not hide behind the banner. It's also the telerik menu control as you can see in the upper left corner of the screen shot.
Any idea how i can get around this problem?
This only has to work in IE7.
Thank you very much.
3 Answers, 1 is accepted
0
Hello Henry,
I believe this problem to be related to the well-known "position: relative" and overflow bug in IE6 and 7 as described in: http://snook.ca/archives/html_and_css/position_relative_overflow_ie/. The docking zone has position: relative, and if it is placed in a parent element that can be scrolled, it will appear as going outside the parent's boundaries in IE6 or 7. Setting position: relative to the parent resolves the issue. So please set position: relative, to the parent element and see if the problem is resolved.
If this does not help in resolving the issue, could you please send us a sample runnable project that shows the problem, so we can debug it locally? You could also provide a live URL where the issue can be observed.
Greetings,
Pero
the Telerik team
I believe this problem to be related to the well-known "position: relative" and overflow bug in IE6 and 7 as described in: http://snook.ca/archives/html_and_css/position_relative_overflow_ie/. The docking zone has position: relative, and if it is placed in a parent element that can be scrolled, it will appear as going outside the parent's boundaries in IE6 or 7. Setting position: relative to the parent resolves the issue. So please set position: relative, to the parent element and see if the problem is resolved.
If this does not help in resolving the issue, could you please send us a sample runnable project that shows the problem, so we can debug it locally? You could also provide a live URL where the issue can be observed.
Greetings,
Pero
the Telerik team
0
Henry
Top achievements
Rank 1
Rank 1
answered on 17 Mar 2011, 06:31 PM
Thank you for looking into this.
The "position:relative" didn't do it. Also I didn't know where to add it. To the DivHeader tag? I tried and it didn't do anything.
However I got a hint from someone else. When I added " z-index: 100;" to the "DivHeader" so it looks like:
<div id="DivHeader" runat="server" style="position: fixed; top: 0; left: 0; right: 0; z-index: 100;">
<asp:Table ...>
content
</asp:Table>
</div>
It works for at least the "RadDockZone" which hides now behind the banner. However the "RadMenuItem" ajax control still floats on top of the banner. See image: The menu "Select / Role" still floats in front of the banner which needs to be fixed. The "RadDockZone" now hides behind the banner as it suppose to do.
Any idea how to fix that?
Thank you
The "position:relative" didn't do it. Also I didn't know where to add it. To the DivHeader tag? I tried and it didn't do anything.
However I got a hint from someone else. When I added " z-index: 100;" to the "DivHeader" so it looks like:
<div id="DivHeader" runat="server" style="position: fixed; top: 0; left: 0; right: 0; z-index: 100;">
<asp:Table ...>
content
</asp:Table>
</div>
It works for at least the "RadDockZone" which hides now behind the banner. However the "RadMenuItem" ajax control still floats on top of the banner. See image: The menu "Select / Role" still floats in front of the banner which needs to be fixed. The "RadDockZone" now hides behind the banner as it suppose to do.
Any idea how to fix that?
Thank you
0
Hi Henry,
What about setting a greater value for the z-index to the "DivHeader"? The menu has a default z-index of 7000, so using a greater value might help.
If the issue is not resolved, could you please send us a code sample or a live URL, that demonstrates the issue, and we will do our best to help?
Kind regards,
Pero
the Telerik team
What about setting a greater value for the z-index to the "DivHeader"? The menu has a default z-index of 7000, so using a greater value might help.
If the issue is not resolved, could you please send us a code sample or a live URL, that demonstrates the issue, and we will do our best to help?
Kind regards,
Pero
the Telerik team