body center in css affects RadMenu in IE7

[Raymond Mui]

The following are the rules I defined in the ASP Theme CSS file:

body
{
 font-family: Tahoma, Verdana, Arial, serif;
 font-size: 8pt;
 color: #2F4F4F;
 width: 960px;
 margin-left: auto;
 margin-right: auto;
 margin-top: 5px;
}

It makes the web page align in the center. 

I have made a RadMenu on the top and align to the right. 

Problem: When I resize the window, the RadMenu does not move along.  For example, if I make the window smaller, the RadMenu is out of screen.  Only when I hover the mouse over the menu, it shifts to the correct position immediately (align to the right).

It happens to IE7 adn IE7 only. 

Is there any workaround for this?

Thanks

[Alex Gyoshev]

Hi Raymond Mui,

We were able to reproduce the problem that you are reporting.

Setting the width and margin properties of the body element results in inconsistent behavior across browsers, so I would like to recommend setting them to the form tag - this way, the issue will disappear. Please examine the following snippet:

<style type="text/css">
.mainForm
{
    font: 8pt Tahoma, Verdana, Arial, serif;
    color: #2F4F4F;
    width: 960px;
    margin: 5px auto 0;
}
</style>

<!-- .... -->

<form id="form1" class="mainForm" runat="server">

There is also a Javascript solution (which is not recommended) - to attach a handler on the "onresize" event. We could provide further help, if requested.

Kind regards,
Alex
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Raymond Mui]

Thanks.  It works well.

Raymond

[Flemming Ottosen]

thanks a lot!

i had the same problem

[Dirk Eberhardt]

Hello,
can you please post also the Javascript solution.

I get problems with my design if I change the form class.

Thanks in advance.

Regards Dirk

[Atanas Korchev]

Hello Dirk Eberhardt,

The JavaScript solution actually depends on the specific case. Could you please send us a sample page which shows the problem you are having? We need some basic html and css sufficient to reproduce the undesired behavior. You can open a support ticket in order to attach files. Alternatively you can post the css and html here.

Regards,
Albert
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Dirk Eberhardt]

The Problem I have: If I change the "BODY" class to ".mainForm", I get problems with my design (my footer) on every Page with have a a second <Form> in it. The Problem occurs only in IE.

Within the css of my body and the footer:

.mainForm
{
    margin:0 auto;
    height:auto;
    width:870px;
    font-family:Arial;
    font-size:12px;
    padding-top:30px;
}

.shadowbottom
{
    background:url(../../Images/Elements/shadow_bottom.gif) right top no-repeat;
    height:10px;
    width:879px;
}

I think the easiest way to fix the problem with the window resizing is to add an javascript onresize action to my site. So I have not to change something in my design.

Could you send me this javascript funktion to refresh the menu control on resize?

Thanks in advance.

Regards Dirk

[Alex Gyoshev]

Hello Dirk,

The javascript would be

window.onresize = $find('<%= RadMenu1.ClientID %>').repaint;

Still, a styling-based solution would be faster and better - so I recommend that you let us help with your styling. Plus, it's the form class attribute that needs changing.

Regards,
Alex
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Dirk Eberhardt]

Where have I to implement it and how?

[Atanas Korchev]

Hi Dirk Eberhardt,

You can try pasting this at the end of your page:

<script type="text/javascript">
function pageLoad() {
   window.onresize = $find('<%= RadMenu1.ClientID %>').repaint;
}
</script>

Regards,
Albert
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Dirk Eberhardt]

Good Morning Albert,
i tried your solution but it doesn't work for me.

I pasted your javascript code to the end of my "masterpage.master", but if I resize the window in IE nothing happens, also no Error?!

Do you have an other idea to fix this problem?!

Regards,
Dirk

[Paul]

Hello Dirk,

Please find below a sample code snippet that shows the needed approach.

<form id="form1" runat="server">
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
    </telerik:RadScriptManager>

    <script type="text/javascript">
        function pageLoad() {
            window.onresize = function() { $find('<%= RadMenu1.ClientID %>').repaint(); };
        }
    </script>

    <telerik:RadMenu ID="RadMenu1" runat="server">
        <Items>
            <telerik:RadMenuItem runat="server" Text="Root RadMenuItem1" NavigateUrl="Default.aspx">
                <Items>
                    <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 1" NavigateUrl="Default.aspx">
                    </telerik:RadMenuItem>
                    <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 2" NavigateUrl="Default.aspx">
                    </telerik:RadMenuItem>
                </Items>
            </telerik:RadMenuItem>
        </Items>
    </telerik:RadMenu>
    </form>

Sincerely yours,
Paul
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Dirk Eberhardt]

Hello Paul,
i tried it again, with no success.

Within I send you the "form"-code of my mastepage.

	<form id="form1" class="mainForm" runat="server">
	<telerik:RadScriptManager ID="ScriptManager1" runat="server">
	</telerik:RadScriptManager>
	<script type="text/javascript">
	function pageLoad() {
	window.onresize = function() { $find('<%= RadMenu1.ClientID %>').repaint(); };
	}
	</script>
	<div align="right">
	<uc2:_SmallNavigation ID="_SmallNavigation" runat="server" />
	</div>
	<div id="container">
	<asp:ContentPlaceHolder id="HeaderContentPlaceHolder" runat="server">
	<table cellpadding="0" cellspacing="0">
	<tr>
	<td>
	<div align="left">
	<uc1:_Header ID="Header" runat="server" />
	</div>
	</td>
	</tr>
	<tr>
	<td>
	<telerik:RadMenu ID="RadMenu1" runat="server">
	</telerik:RadMenu>
	</td>
	</tr>
	<tr>
	<td >
	</asp:ContentPlaceHolder>
	<asp:ContentPlaceHolder ID="MainContentPlaceholder" runat="server">
	</asp:ContentPlaceHolder>
	</td>
	</tr>
	</table>
	</div>
	<div class="shadowbottom"></div>
	</form>

Do you see any errors in my code?

Regards,
Dirk

[Paul]

Hi Dirk,

I think you have mistakenly added the menu control in a ContentPlaceHolder in your masterpage. This is not right. The ContentPlaceHolders are used to add content inside them via the ASPX pages. All controls defined in the masterpage should be placed outside the ContentPlaceHolders. Here's you modified code snippet that works as expected.

	<form id="form1" class="mainForm" runat="server">
	<telerik:RadScriptManager ID="ScriptManager1" runat="server">
	</telerik:RadScriptManager>
	<script type="text/javascript">
	function pageLoad() {
	window.onresize = function() { $find('<%= RadMenu1.ClientID %>').repaint(); debugger };
	}
	</script>
	<div align="right">
	UC1
	</div>
	<div id="container">
	<table cellpadding="0" cellspacing="0">
	<tr>
	<td>
	<div align="left">
	HEADER
	</div>
	</td>
	</tr>
	<tr>
	<td>
	<telerik:RadMenu ID="RadMenu1" runat="server">
	</telerik:RadMenu>
	</td>
	</tr>
	<tr>
	<td>
	</td>
	</tr>
	</table>
	<asp:ContentPlaceHolder ID="HeaderContentPlaceHolder" runat="server">
	</asp:ContentPlaceHolder>
	<asp:ContentPlaceHolder ID="MainContentPlaceholder" runat="server">
	</asp:ContentPlaceHolder>
	</div>
	<div class="shadowbottom">
	</div>
	</form>

Regards,
Paul
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Dirk Eberhardt]

Hello Paul,
i've changed the code.

I've deleted the "HeaderContentPlaceHolder" which was arround the "RadMenu".

Unfortunately it also doesn't work.

Below my changed code:

<form id="form1" class="mainForm" runat="server">
    <telerik:RadScriptManager ID="ScriptManager1" runat="server">
    </telerik:RadScriptManager>

    <script type="text/javascript">
        function pageLoad() {
            window.onresize = function() { $find('<%= RadMenu1.ClientID %>').repaint(); debugger };
        }
    </script>

    <div align="right">
        <uc2:_SmallNavigation ID="_SmallNavigation" runat="server" />
    </div>
    <div id="container">
        <table cellpadding="0" cellspacing="0">
            <tr>
                <td>
                    <div align="left">
                        <uc1:_Header ID="Header" runat="server" />
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <telerik:RadMenu ID="RadMenu1" runat="server">
                    </telerik:RadMenu>
                </td>
            </tr>
            <tr>
                <td>
                    <asp:ContentPlaceHolder ID="MainContentPlaceholder" runat="server">
                    </asp:ContentPlaceHolder>
                </td>
            </tr>
        </table>

    </div>
    <div class="shadowbottom">
    </div>
    </form>

Any ideas?

Regards,
Dirk

[Paul]

Hello Dirk,

Please find attached a sample web application that shows the proper work of the provided JS. If you have further problems in your implementation, please open a formal support ticket and send a simple running project (incl. your custom skin, CSS, images, DB backup if needed and so on) demonstrating the problem (and step-by-step instructions on doing so). In that way we can reproduce and pinpoint the problems you're facing on our side, understand the logic of your application and provide a solution.

Greetings,
Paul
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Dirk Eberhardt]

Good Morning,
i fixed this problem now with changing my masterpage design and without the javascript fix.

Thank you for your help.

Regards,
Dirk