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:
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
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
>
<
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
>
</
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