We are finally upgrading to IE8.0 and I'm trying to figure out a minor issue with the Menu Control Styles. Our corporate standards require us to have a
white dashed border on the right side of each static menu item. The problem is, when I first load a page, the menu items display as a
white solid border on the right side of each static menu. As soon as I mouse over the menu, the static menu items change from solid to dashed which is how they should display. I am including my skin file and my style sheet file. If I
run IE8.0 in compatibility mode, the menu works as expected. What is the problem?
rspiet
Member
23 Points
122 Posts
Menu Control Issue - Maybe IE8.0 related
May 25, 2010 08:11 PM|LINK
We are finally upgrading to IE8.0 and I'm trying to figure out a minor issue with the Menu Control Styles. Our corporate standards require us to have a white dashed border on the right side of each static menu item. The problem is, when I first load a page, the menu items display as a white solid border on the right side of each static menu. As soon as I mouse over the menu, the static menu items change from solid to dashed which is how they should display. I am including my skin file and my style sheet file. If I run IE8.0 in compatibility mode, the menu works as expected. What is the problem?
Skin File ------------------------------------------------------------- <asp:Menu runat="server" Orientation="Horizontal" StaticDisplayLevels="1" DynamicHorizontalOffset="0" DynamicPopOutImageTextFormatString="" StaticPopOutImageTextFormatString="" DynamicEnableDefaultPopOutImage="true" CssClass="Menu" StaticEnableDefaultPopOutImage="False"> <StaticMenuStyle CssClass="StaticMenuStyle"/> <StaticMenuItemStyle CssClass="StaticMenuItemStyle"/> <StaticSelectedStyle CssClass="StaticSelectedStyle"/> <StaticHoverStyle CssClass="StaticHoverStyle"/> <DynamicHoverStyle CssClass="DynamicHoverStyle"/> <DynamicMenuStyle CssClass="DynamicMenuStyle"/> <DynamicMenuItemStyle CssClass="DynamicMenuItemStyle"/> <DynamicSelectedStyle CssClass="DynamicSelectedStyle"/> </asp:Menu> StyleSheet File ------------------------------------------------------------- .Menu { font-family:Arial; font-size:9pt; font-weight:bold; background-color:#414042; text-align:left; padding:2px; } .StaticMenuStyle { background-color:#414042; padding:2px 0px 2px 0px; } .StaticMenuItemStyle { color:white; padding:2px 5px 2px 5px; border-right:1px white dashed; text-align:left; } .StaticHoverStyle { color:#E6450F; text-decoration:underline; } .StaticSelectedStyle { color:#E6450F; text-decoration:underline; } .DynamicMenuItemStyle { color:#414042; padding:2px 5px 2px 5px; font-family:Arial; font-size:9pt; font-weight:bold; z-index:100; } .DynamicHoverStyle { color:white; background-color:#414042; text-decoration:underline; z-index:100; } .DynamicMenuStyle { border:1px solid #414042; text-align:left; z-index:100; }