[Solved] different style with google chrome and IE9

[Fabio Cirillo]

Hi,
i wrote this code radmanu:

<telerik:RadMenu ID="RadMenu1" Runat="server" EnableRoundedCorners="True"
  OnItemClick="RadMenu1_ItemClick"
  EnableShadows="True" Skin="Office2010Silver"
  style="top: 0px; left: 0px" Height="30px" Width="940px">
     <Items>
         <telerik:RadMenuItem runat="server" Font-Names="Verdana" Font-Size="Small"
         Text="Immagine profilo" Owner="RadMenu1">
     <Items>
         <telerik:RadMenuItem runat="server" Font-Names="Verdana"
         ImageUrl="~/Image/Icone/kuser.png" Owner="" Text="Nuova immagine">
         </telerik:RadMenuItem>
         <telerik:RadMenuItem runat="server" Font-Names="Verdana"
         ImageUrl="~/Image/Icone/delete.png" Owner="" Text="Elimina immagine">
         </telerik:RadMenuItem>
     </Items>
         </telerik:RadMenuItem>
         <telerik:RadMenuItem runat="server" IsSeparator="True"
             Text="Root RadMenuItem13" Owner="RadMenu1">
         </telerik:RadMenuItem>
         <telerik:RadMenuItem runat="server" Font-Names="Verdana" Font-Size="Small"
         Text="Sfondo biglietto">
             <Items>
                 <telerik:RadMenuItem runat="server" Font-Names="Verdana"
                     ImageUrl="~/Image/Icone/lphoto.png" Owner="" Text="Nuovo sfondo" Value="3"
                     Width="180px">
                 </telerik:RadMenuItem>
                 <telerik:RadMenuItem runat="server" Font-Names="Verdana"
                     ImageUrl="~/Image/Icone/delete.png" Owner="" Text="Elimina sfondo" Value="4"
                     Width="180px">
                 </telerik:RadMenuItem>
             </Items>
         </telerik:RadMenuItem>
         <telerik:RadMenuItem runat="server" IsSeparator="True" Owner="RadMenu1"
         Text="Root RadMenuItem4">
         </telerik:RadMenuItem>
         <telerik:RadMenuItem runat="server" Font-Names="Verdana"
         Font-Size="Small" Text="I miei preferiti" Enabled="False">
         </telerik:RadMenuItem>
         <telerik:RadMenuItem runat="server" IsSeparator="True"
         Text="Root RadMenuItem13">
         </telerik:RadMenuItem>
         <telerik:RadMenuItem runat="server" Font-Names="Verdana" Font-Size="Small"
         Text="Invita un amico" Owner="RadMenu1">
         </telerik:RadMenuItem>
         <telerik:RadMenuItem runat="server" IsSeparator="True" Text="Root RadMenuItem6"
         Owner="RadMenu1">
         </telerik:RadMenuItem>
         <telerik:RadMenuItem runat="server" Font-Names="Verdana" Font-Size="Small"
         Text="Modifica password" Owner="RadMenu1">
         </telerik:RadMenuItem>
         <telerik:RadMenuItem runat="server" IsSeparator="True"
         Text="Root RadMenuItem8">
         </telerik:RadMenuItem>
         <telerik:RadMenuItem runat="server" Font-Names="Verdana" Font-Size="Small"
         Text="Elimina account">
         </telerik:RadMenuItem>
         <telerik:RadMenuItem runat="server" IsSeparator="True" Owner="RadMenu1"
             Text="Root RadMenuItem10">
         </telerik:RadMenuItem>
         <telerik:RadMenuItem runat="server" Font-Names="Verdana" Font-Size="Small"
             Owner="RadMenu1" Text="Esci da Trycontact">
         </telerik:RadMenuItem>
     </Items>
     <ExpandAnimation Type="OutBack" />
 </telerik:RadMenu>

and this radmenu is located in a Div with css and this code:

.divmenuprofile
{
   width:964px;
   height: 35px;
   text-align:center;
   padding-left:23px;
   padding-top:8px;
   border: 1px solid #D5842B;
   background: #cccccc; /* opera */
   background: -webkit-gradient(linear, top, bottom, from(#cccccc), to(#ffffff)); /* chrome e safari4+ */
   background: -webkit-linear-gradient(top, #cccccc, #ffffff); /* Chrome 10+ e safari6 */
   background: -moz-linear-gradient(top,  #cccccc,  #ffffff); /* firefox 3.6+ */
   background: linear-gradient(top, #cccccc, #ffffff);
   filter: progid:DXImageTransform.Microsoft.gradient(GradientType = 0,startColorstr='#cccccc', endColorstr='#ffffff'); /*  IE 5.5-7*/
   -ms-filter: 'progid:DXImageTransform.Microsoft.gradient(GradientType = 0,startColorstr='#cccccc', endColorstr='#ffffff')'; /*  IE 8*/
   border-radius: 8px;
   -moz-border-radius: 8px;
   -khtml-border-radius: 8px;
   -webkit-border-radius: 8px;
   behavior: url(/App_Themes/TryCss/PIE.htc);
}

i posted two image. One there's radmenu with google chrome and good view and another with IE9 and the style is differente no good, why and and how can I solve the problem?

[MasterChiefMasterChef]

Hi Fabio,

The two instances are not different styles, but they display the information in two different ways. Unfortunately, your menu in IE drops down to a second line, extending the box it is contained in. The easiest fix I can think of is to play with the css file. Either shift the container's margin to the left, or you could make the font size smaller in IE. This should be a simple css fix.

Good luck,
Master Chief