This is a migrated thread and some comments may be shown as answers.

RadMenu Mega Drop Down Display Issue in IE7

1 Answer 171 Views

This is a migrated thread and some comments may be shown as answers.

Jacques asked on 10 Apr 2012, 03:04 PM

Should-Look-Like.png

What-it-Looks-like-in-IE7.png

Hi there,

EDIT: We've just isolated this further. The problem is coming from the RadComboBox inside the RadMenu slide.
We're making use of PIE.htc for specific IE scenarios like Border Radius, Gradients and so forth, which works well all over the site except in this one instance. When the CSS3-Container is rendered it is given a radiculously high width (15500px) and height (2700px).

We're having a serious issue where a form inside a RadMenuItem template displays well in all browsers except in IE 7 where it basically explodes out of proportion. See the attached image, the first showing what it should look like and does look like in all other browsers and the second showing what it looks like in IE7.

Something else we're noticing is that if you zoom out of the page or if you open the developer bar at the bottom... it flips back to its normal size. Still doesn't look great, but at least it doesn't look like an explosion went off on the page.

The code looks like this:

<telerik:RadMenu ID="SubNav" runat="server" ClickToOpen="true" Width="800px" EnableEmbeddedBaseStylesheet="false"

EnableEmbeddedSkins="false" CollapseAnimation-Type="None" ExpandAnimation-Type="None">

<Items>

<telerik:RadMenuItem Text="Ship" PostBack="false" OuterCssClass="menuButton menuButtonShip">

<Items>

<telerik:RadMenuItem CssClass="subNavPopUpBox">

<ItemTemplate>

<div id="shipMenu">

<div id="truckload" class="subNavColumns">

<div class="subNavColumnBody">

<h2>

Freight Brokerage</h2>

<div class="subNavImages">

<img src="/Sitefinity/WebsiteTemplates/Template2012/App_Themes/CorporateTheme/Images/subNavTruckload.png"

height="98px" width="139px" /></div>

<p>

We offer a full range of on-the-raod freight services:

<ul>

<li><strong>Full Truckloads</strong></li>

<li><strong>LTL</strong></li>

<li><strong>Temp Controlled</strong></li>

</ul>

</p>

</div>

<div class="subNavColumnFooter">

<a href="/about/our-services/freight-brokerage" class="subNavLink subNavMoreLink">

more</a><a id="shipSelectTruckload" href="#" class="subNavSelect subNavSelectOn">select</a>

</div>

<div id="expedited" class="subNavColumns">

<div class="subNavColumnBody">

<h2>

Expedited Shipping</h2>

<div class="subNavImages">

<img src="/Sitefinity/WebsiteTemplates/Template2012/App_Themes/CorporateTheme/Images/subNavExpedited.png" /></div>

<p>

For your expedited services or special handling needs. Use our own fleet of owner

operators to move your loads quickly and reliably.</p>

</div>

<div class="subNavColumnFooter">

<a href="/about/our-services/expedited-shipping" class="subNavLink subNavMoreLink">

more</a><a id="shipSelectExpedited" href="" class="subNavSelect subNavSelectOff">select</a></div>

</div>

<div id="freight" class="subNavColumns">

<div class="subNavColumnBody">

<h2>

Freight Forwarding</h2>

<div class="subNavImages">

<img src="/Sitefinity/WebsiteTemplates/Template2012/App_Themes/CorporateTheme/Images/subNavFreight.png" /></div>

<p>

Whether your Air or Ocean freight is going domestically or internationally, we got

you covered.<br />

<a href="" class="subNavLink subNavDownloadLink">Download Forms</a>

</p>

</div>

<div class="subNavColumnFooter">

<a href="/about/our-services/freight-forwarding" class="subNavLink subNavMoreLink">

more</a><a id="shipSelectFreight" href="" class="subNavSelect subNavSelectOff">select</a></div>

</div>

<div id="shipForm" class="subNavColumns">

<fieldset id="shipFormTruckload" class="form">

<div class="subNavColumnBody">

<h2>

Enter Your Truckload Brokerage Details</h2>

<ul>

<li>

<asp:Label ID="FromZipCodeLabel" AssociatedControlID="FromZipCode" runat="server">From Zip Code <span class="validate">*</span></asp:Label>

<telerik:RadTextBox Width="168px" runat="server" ID="FromZipCode" EnableEmbeddedBaseStylesheet="false"

EnableEmbeddedSkins="false" EnableSingleInputRendering="true">

</telerik:RadTextBox>

</li>

<li>

<asp:Label ID="ToZipCodeLabel" AssociatedControlID="ToZipCode" runat="server">

To Zip Code <span class="validate">*</span></asp:Label>

<telerik:RadTextBox Width="168px" runat="server" ID="ToZipCode" EnableEmbeddedBaseStylesheet="false"

EnableEmbeddedSkins="false" EnableSingleInputRendering="true">

</telerik:RadTextBox>

</li>

<li>

<asp:Label ID="TruckTypesLabel" AssociatedControlID="TruckTypes" runat="server">

To Zip Code <span class="validate">*</span></asp:Label>

<telerik:RadComboBox Width="168px" ZIndex="99999" ID="TruckTypes" runat="server"

Height="50px" EnableEmbeddedBaseStylesheet="false" EnableEmbeddedSkins="false">

<Items>

<telerik:RadComboBoxItem Text="Dry Van/ Truckload" />

<telerik:RadComboBoxItem Text="Flatbed" />

<telerik:RadComboBoxItem Text="Temperature Controlled" />

<telerik:RadComboBoxItem Text="Over Dimensional" />

<telerik:RadComboBoxItem Text="LTL" />

</Items>

</telerik:RadComboBox>

</li>

<li>

<asp:Label ID="DimensionsLabel" AssociatedControlID="Weight" runat="server">

Weight/Dimensions<br />

<span class="subtleNote">(in lbs and inches)</span></asp:Label>

<div style="position: relative; float: right; width: 182px">

<telerik:RadTextBox ID="Weight" EmptyMessage="Wt" runat="server" Width="25px" EnableEmbeddedBaseStylesheet="false"

EnableEmbeddedSkins="false" EnableSingleInputRendering="true">

</telerik:RadTextBox>

<telerik:RadTextBox ID="Width" EmptyMessage="W" runat="server" Width="25px" EnableEmbeddedBaseStylesheet="false"

EnableEmbeddedSkins="false" EnableSingleInputRendering="true">

</telerik:RadTextBox>

<telerik:RadTextBox ID="Height" EmptyMessage="H" runat="server" Width="25px" EnableEmbeddedBaseStylesheet="false"

EnableEmbeddedSkins="false" EnableSingleInputRendering="true">

</telerik:RadTextBox>

<telerik:RadTextBox ID="Length" EmptyMessage="L" runat="server" Width="25px" EnableEmbeddedBaseStylesheet="false"

EnableEmbeddedSkins="false" EnableSingleInputRendering="true">

<EmptyMessageStyle Height="20px" />

</telerik:RadTextBox>

</div>

</li>

</ul>

</div>

<div class="subNavColumnFooter">

<span class="validate">*</span> <span class="subtleNote">Required Fields</span>

<telerik:RadButton Height="27px" ID="TruckloadQuoteOnly" Text="Quote Only" TabIndex="8"

runat="server" ToggleType="CheckBox" ButtonType="LinkButton" AutoPostBack="false"

EnableEmbeddedBaseStylesheet="false" EnableEmbeddedSkins="false">

<ToggleStates>

<telerik:RadButtonToggleState PrimaryIconCssClass="rbToggleCheckboxChecked" />

<telerik:RadButtonToggleState PrimaryIconCssClass="rbToggleCheckbox" />

</ToggleStates>

</telerik:RadButton>

<a href="" class="subNavNext">Next</a>

</div>

</fieldset>

<fieldset id="shipFormExpedited" class="form">

<div class="subNavColumnBody">

<h2>

Enter Your Expedited Shipping Details</h2>

<ul>

<li>

<asp:Label ID="Test1Label" AssociatedControlID="Test1" runat="server">From Zip Code <span class="validate">*</span></asp:Label>

<telerik:RadTextBox Width="168px" runat="server" ID="Test1" EnableEmbeddedBaseStylesheet="false"

EnableEmbeddedSkins="false">

</telerik:RadTextBox></li>

<li>

</ul>

</div>

<div class="subNavColumnFooter">

<a href="" class="subNavNext">Next</a>

</div>

</fieldset>

<fieldset id="shipFormFreight" class="form">

<div class="subNavColumnBody">

<h2>

Enter Your Freight Forwarding Details

</h2>

<ul>

<li>

<asp:Label ID="Label2" AssociatedControlID="RadTextBox2" runat="server">From Zip Code <span class="validate">*</span></asp:Label>

<telerik:RadTextBox Width="168px" runat="server" ID="RadTextBox2" EnableEmbeddedBaseStylesheet="false"

EnableEmbeddedSkins="false">

</telerik:RadTextBox></li>

<li>

</ul>

</div>

<div class="subNavColumnFooter">

<a href="" class="subNavNext">Next</a>

</div>

</fieldset>

<a href="" id="shipMenuClose" onclick="menu_Close();return false;">X</a>

</div>

</ItemTemplate>

</telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

</Items>

</telerik:RadMenu>

I've removed the additional menus, but they're behaving just as badly.

Any help with this would be appreciated.
PS. We're using the Telerik controls that come with Sitefinity 4.4 (It's a SF project, but it's the Telerik controls causing the issues not Sitefinity)

Regards,
Jacques

1 Answer, 1 is accepted

answered on 11 Apr 2012, 01:06 PM

Hello, Jacques.

We noticed that you are not using neither the embed skins, nor the base css files which come with our controls - you have set the EnableEmbeddedBaseStylesheet and EnableEmbeddedSkins of RadMenu to false.In addition, you are using additional third party styles and scripts, which makes your case further deviate from typical issues related to the RadMenu.

Never the less, we will look into your case and see if we could be of any assistance. It should be noted though that the mark up you provided is not enough to reproduce your case locally, as the mark up alone is just another menu with no style information or scripts.

Can you send us a link to a live URL where we can inspect the code and see what's causing the issues or isolate it in a sample project(together with any external resources used)?

All the best,
Ivan Zhekov
the Telerik team

If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.