My ASP:MENU is styled with some CSS properties, such as setting the 'height' and 'line-height' of each element to 15px. This design appears fine in Internet Explorer but seems too cramped in Chrome. Additionally, a 'border-bottom-style: dotted' is applied to the elements. In IE, this dotted line matches the width of the table element, while in Chrome it aligns with the text width.
I've inspected the page code using Developer Tools in both Chrome and IE, and confirmed that they are receiving the styles correctly. Why do the browsers display them differently? Could it be an inherent rendering discrepancy between Chrome and other browsers? If so, I might need to consider using different CSS styles depending on the browser, unless there's another solution I can attempt?
<asp:Menu ID="menuSubLeft" runat="server" DataSourceID="sitemap_submenu"
MaximumDynamicDisplayLevels="1">
<StaticMenuStyle CssClass="clienthome_submenuMenu" />
<StaticMenuItemStyle CssClass="clienthome_submenuItemMenu" />
<StaticSelectedStyle CssClass="clienthome_submenuSelectedStyle" />
<StaticHoverStyle CssClass="clienthome_submenuHoverStyle" />
<DynamicMenuItemStyle CssClass="clienthome_dynamicMenu_Item" />
<DynamicHoverStyle CssClass="clienthome_submenuHoverStyle" />
<DynamicMenuStyle CssClass="dynamicMenu_style_left" />
<DynamicSelectedStyle CssClass="clienthome_submenuSelectedStyle" />
</asp:Menu>
.clienthome_submenuItemMenu
{
border-bottom:dotted 1px #5a57a6;
height:15px;
line-height:15px;
padding:2px 0px 2px 5px;
color:#5A57A6;
}
<table id="ctl00_ctl00_globalContent_menuSubLeft"
class="clienthome_submenuMenu ctl00_ctl00_globalContent_menuSubLeft_5 ctl00_ctl00_globalContent_menuSubLeft_2"
cellpadding="0"
cellspacing="0"
border="0">
<tr onmouseover="Menu_HoverStatic(this)"
onmouseout="Menu_Unhover(this)"
onkeyup="Menu_Key(this)" title="Allows client to change their account password" id="ctl00_ctl00_globalContent_menuSubLeftn0">
<td>
<table class="clienthome_submenuItemMenu ctl00_ctl00_globalContent_menuSubLeft_4" cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td style="white-space:nowrap;width:100%;">
<a class="ctl00_ctl00_globalContent_menuSubLeft_1 clienthome_submenuItemMenu ctl00_ctl00_globalContent_menuSubLeft_3" href="/myprofile.aspx" style="border-style:none;font-size:1em;">My Profile</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
UPDATE: Despite spending hours tweaking the CSS without success or breaking other parts of the site, my colleague suggested a simple fix: I just needed to add the following code to the backend:
protected void Page_PreInit(object sender, EventArgs e)
{
if (Page.Request.ServerVariables["http_user_agent"].ToLower().Contains("safari"))
{
Page.ClientTarget = "uplevel";
}
}