Question

I have a ASP:MENU with some CSS styles applied to it. One of the options we specify on the table is that each element have a ‘height’ and ‘line-height’ of 15px. This looks fine in IE, but too cramped in Chrome. Additionally we apply ‘border-bottom-style: dotted’ to the element. In IE this dotted line is equal to the width of the table element. In Chrome it is the same width as the text.

I’ve examined the code for the page in Developer tools in Chrome and IE, and they’re receiving the styles as required. Why do they display differently, is it simply an inherent difference in the way Chrome renders a site? If this is the case it may be that I need to use a different CSS style sheet, depending upon the browser, unless there is something else I can try?

<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: After hours of playing around with the CSS and getting nowhere/throwing everything else on the site out a colleague pointed me to a simple fix: I just added the following code to the code behind:

protected void Page_PreInit(object sender, EventArgs e)
    {
        if (Page.Request.ServerVariables["http_user_agent"].ToLower().Contains("safari"))
        {
            Page.ClientTarget = "uplevel";
        }
    }

Answer 1

This is something like CSS PRECEDENCE

6.4 The cascade

Style sheets may have three different origins: author, user, and user agent.

• Author. The author specifies style sheets for a source document according to the conventions of the document language. For instance, in HTML, style sheets may be included in the document or linked externally.
• User: The user may be able to specify style information for a particular document. For example, the user may specify a file that contains a style sheet or the user agent may provide an interface that generates a user style sheet (or behaves as if it did).
• User agent: Conforming user agents must apply a default style sheet (or behave as if they did). A user agent’s default style sheet should present the elements of the document language in ways that satisfy general presentation expectations for the document language (e.g., for visual browsers, the EM element in HTML is presented using an italic font). See A sample style sheet for HTML for a recommended default style sheet for HTML documents.

If this is your case, just RESET your base styling in order to remove padding and margin for block and table elements.