Strange extra padding in chrome using standard VS 2010 template

Question

I have the following code slightly modified from the Visual Studio 2010 css template. My problem is I'm getting extra top padding/margin of approx 10px in the parent div's of the menu controls in chrome only. It's fine in IE. Whats going on here?

CSS

    /* CSS RESET 
----------------------------------------------------------*/
*{margin:0;padding:0;}


/* DEFAULTS
----------------------------------------------------------*/

body   
{
    background: #b6b7bc;
    font-size: .80em;
    font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
    margin: 0px;
    padding: 0px;
    color: #696969;
}

a:link, a:visited
{
    color: #034af3;
}

a:hover
{
    color: #1d60ff;
    text-decoration: none;
}

a:active
{
    color: #034af3;
}

p
{
    margin-bottom: 10px;
    line-height: 1.6em;
}


/* HEADINGS   
----------------------------------------------------------*/

h1, h2, h3, h4, h5, h6
{
    font-size: 1.5em;
    color: #666666;
    /*font-variant: small-caps;*/
    text-transform: none;
    font-weight: 200;
    margin-bottom: 0px;
}

h1
{
    font-size: 1.6em;
    padding-bottom: 0px;
    margin-bottom: 0px;
}

h2
{
    font-size: 1.5em;
    font-weight: 600;
}

h3
{
    font-size: 1.2em;
}

h4
{
    font-size: 1.1em;
}

h5, h6
{
    font-size: 1em;
}

/* this rule styles <h1> and <h2> tags that are the 
first child of the left and right table columns */
.rightColumn > h1, .rightColumn > h2, .leftColumn > h1, .leftColumn > h2
{
    margin-top: 0px;
}


/* PRIMARY LAYOUT ELEMENTS   
----------------------------------------------------------*/

.page
{
    width: 960px;
    background-color: #fff;
    margin: 20px auto 0px auto;
    border: 1px solid #496077;
}

.header
{
    position: relative;
    margin: 0px;
    padding: 0px;
    background: #4b6c9e;
    width: 100%;
}

.header h1
{
    font-weight: 700;
    margin: 0px;
    padding: 0px 0px 0px 20px;
    color: #f9f9f9;
    border: none;
    line-height: 2em;
    font-size: 2em;
}

.main
{
    min-height: 420px;
}

.mainContent
{
    float:left;    
    width:790px; 
    padding-left:8px;
}

.leftCol
{
    padding: 6px 0px;
    margin: 12px 8px 8px 8px;
    width: 200px;
    min-height: 200px;
}

.footer
{
    color: #4e5766;
    padding: 8px 0px 0px 0px;
    margin: 0px auto;
    text-align: center;
    line-height: normal;
}


/* TAB MENU   
----------------------------------------------------------*/

div.hideSkiplink
{

}

div.topMenuContainer
{
    background-color:#3a4f63;
    width:100%;
}

div.menu
{
    padding: 0px 0px 4px 8px;
}

div.menu ul
{
    list-style: none;
    margin: 0px;
    padding: 0px;
    width: auto;
}

div.menu ul li a, div.menu ul li a:visited
{
    background-color: #465c71;
    border: 1px #4e667d solid;
    color: #dde4ec;
    display: block;
    line-height: 1.35em;
    padding: 4px 20px;
    text-decoration: none;
    white-space: nowrap;
    margin:0px;
}

div.menu ul li a:hover
{
    background-color: #bfcbd6;
    color: #465c71;
    text-decoration: none;
    margin:0px;
}

div.menu ul li a:active
{
    background-color: #465c71;
    color: #cfdbe6;
    text-decoration: none;
    margin:0px;
}

/* LEFT MENU   
----------------------------------------------------------*/

div.leftMenuContainer
{
    background-color:#3a4f63;
    width:160px;
    float:left;
    min-height: 420px;
}

div.leftMenu
{
    padding: 4px 0px 4px 8px;
}

div.leftMenu ul
{
    list-style: none;
    margin: 0px;
    padding: 0px;
    width: auto;
}

div.leftMenu ul li a, div.leftMenu ul li a:visited
{
    background-color: #465c71;
    border: 1px #4e667d solid;
    color: #dde4ec;
    display: block;
    line-height: 1.35em;
    padding: 4px 20px;
    text-decoration: none;
    white-space: nowrap;
}

div.leftMenu ul li a:hover
{
    background-color: #bfcbd6;
    color: #465c71;
    text-decoration: none;
}

div.leftMenu ul li a:active
{
    background-color: #465c71;
    color: #cfdbe6;
    text-decoration: none;
}

/* FORM ELEMENTS   
----------------------------------------------------------*/

fieldset
{
    margin: 1em 0px;
    padding: 1em;
    border: 1px solid #ccc;
}

fieldset p 
{
    margin: 2px 12px 10px 10px;
}

fieldset.login label, fieldset.register label, fieldset.changePassword label
{
    display: block;
}

fieldset label.inline 
{
    display: inline;
}

legend 
{
    font-size: 1.1em;
    font-weight: 600;
    padding: 2px 4px 8px 4px;
}

input.textEntry 
{
    width: 320px;
    border: 1px solid #ccc;
}

input.passwordEntry 
{
    width: 320px;
    border: 1px solid #ccc;
}

div.accountInfo
{
    width: 42%;
}

/* MISC  
----------------------------------------------------------*/

.clear
{
    clear: both;
}

.title
{
    display: block;
    float: left;
    text-align: left;
    width: auto;
}

.loginDisplay
{
    font-size: 1.1em;
    display: block;
    text-align: right;
    padding: 10px;
    color: White;
}

.loginDisplay a:link
{
    color: white;
}

.loginDisplay a:visited
{
    color: white;
}

.loginDisplay a:hover
{
    color: white;
}

.failureNotification
{
    font-size: 1.2em;
    color: Red;
}

.bold
{
    font-weight: bold;
}

.submitButton
{
    text-align: right;
    padding-right: 10px;
}

ASPX

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="MTGames.SiteMaster" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head runat="server">
    <title></title>
    <link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
    <asp:ContentPlaceHolder ID="HeadContent" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form runat="server">
    <div class="page">
        <div class="header">
            <div class="title">
                <h1>
                    My Site
                </h1>
            </div>
            <div class="loginDisplay">
                <asp:LoginView ID="HeadLoginView" runat="server" EnableViewState="false">
                    <AnonymousTemplate>
                        [ <a href="~/Account/Login.aspx" ID="HeadLoginStatus" runat="server">Log In</a> ]
                    </AnonymousTemplate>
                    <LoggedInTemplate>
                        Welcome <span class="bold"><asp:LoginName ID="HeadLoginName" runat="server" /></span>!
                        [ <asp:LoginStatus ID="HeadLoginStatus" runat="server" LogoutAction="Redirect" LogoutText="Log Out" LogoutPageUrl="~/"/> ]
                    </LoggedInTemplate>
                </asp:LoginView>
            </div>
            <div class="clear topMenuContainer hideSkiplink">
                <asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal">
                    <Items>
                        <asp:MenuItem NavigateUrl="~/Default.aspx" Text="Home"/>
                        <asp:MenuItem NavigateUrl="~/Content/SavingsClub.aspx" Text="Savings Club"/>
                        <asp:MenuItem NavigateUrl="~/Content/BuySellExchange.aspx" Text="Buy Sell Exchange"/>
                        <asp:MenuItem NavigateUrl="~/Content/Photos.aspx" Text="Photos"/>
                        <asp:MenuItem NavigateUrl="~/Content/ContactUs.aspx" Text="Contact Us"/>
                    </Items>
                </asp:Menu>
            </div>
        </div>

        <div class="main">
            <div class="clear leftMenuContainer hideSkiplink">
                <asp:Menu ID="LeftNavMenu" runat="server" CssClass="leftMenu" EnableViewState="false" IncludeStyleBlock="false" Orientation="Vertical">
                    <Items>
                        <asp:MenuItem NavigateUrl="~/Default.aspx" Text="Home"/>
                        <asp:MenuItem NavigateUrl="~/Content/SavingsClub.aspx" Text="Savings Club"/>
                        <asp:MenuItem NavigateUrl="~/Content/BuySellExchange.aspx" Text="Buy Sell Exchange"/>
                        <asp:MenuItem NavigateUrl="~/Content/Photos.aspx" Text="Photos"/>
                        <asp:MenuItem NavigateUrl="~/Content/ContactUs.aspx" Text="Contact Us"/>
                    </Items>
                </asp:Menu>
            </div>
            <div class="mainContent">
                <asp:ContentPlaceHolder ID="MainContent" runat="server"/>
            </div>
        </div>
        <div class="clear">
        </div>
    </div>
    <div class="footer">

    </div>
    </form>
</body>
</html>

HTML Output as requested...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head><title>

    MT Games LTD - Home

</title><link href="Styles/Site.css" rel="stylesheet" type="text/css" />

</head>

<body>

    <form method="post" action="default.aspx" id="ctl01">

<div class="aspNetHidden">

<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />

<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />

<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTY1NDU2MTA1MmRkLDnBf84MIbFVqD400rg+QLHpOjYA01q5saPk2YvtQR8=" />

</div>



<script type="text/javascript">

//<![CDATA[

var theForm = document.forms['ctl01'];

if (!theForm) {

    theForm = document.ctl01;

}

function __doPostBack(eventTarget, eventArgument) {

    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {

        theForm.__EVENTTARGET.value = eventTarget;

        theForm.__EVENTARGUMENT.value = eventArgument;

        theForm.submit();

    }

}

//]]>

</script>





<script src="/WebResource.axd?d=e5ggu92Xslxua3kL9nz8UEofZFOqESloGE_Cj0acdYupGWiZv6mA-7j9gl1qZyu-Y2_dOyT682uBRYryo2Uk1qSiI78I-2pgTagWwnubNEw1&amp;t=634220066968172593" type="text/javascript"></script>





<script src="/ScriptResource.axd?d=vohUtv47l55JX-_SEfdvXX1rc3wSNSZ9IvoYKmaPF-0UDpWX_2VTYUNkLm7PO0jeF56__8cFVok93Md1-jOV27X9JbBIl3KWaifSkCmwKvk3Dgj6N7xFweVjQK5drnmfItGQ0AEWh8sbhd1vBIHoeA2&amp;t=6df0ad7a" type="text/javascript"></script>

<script src="/ScriptResource.axd?d=r99416_-lUTvcLqe0vx1emg4MR_VAgLHwDco9wPW98QgH03QnH7DRQkA0mx2FQZ5VppBb7JYwOM3gTOTGs8r_j6W0xaQKJo8xTEbbaYeAM9WE90s6Tp-uohjL07JySbKxyIzs5kMm3DtV3kkrbMsJmAIQGWT7gReSVSkk-vQtlSm8AGzdfW36I9zdQwR-z_60&amp;t=2610f696" type="text/javascript"></script>

<script type="text/javascript">

//<![CDATA[

if (typeof(Sys) === 'undefined') throw new Error('ASP.NET Ajax client-side framework failed to load.');

//]]>

</script>



<script src="/ScriptResource.axd?d=otDNNytXiqv-illCGIud3TULs9-clnOJc4rCdck1L_NgOC9rQIuScBEulatBNXXmu3mRYEY-IBlraYglBRImGj3VFqJMq5q1D8augYHxad15XoOHRiy4KA8ZCRoOmHQsaZmo-EGDbQ833sK4G1QpyLm1dIkybv0r0OSMKV_PkG29XB8AWUm5gsLlNrC2G67K0&amp;t=2610f696" type="text/javascript"></script>

    <script type="text/javascript">

//<![CDATA[

Sys.WebForms.PageRequestManager._initialize('ctl00$ScrptManager', 'ctl01', [], [], [], 90, 'ctl00');

//]]>

</script>



    <div class="page">

        <div class="header">

            <div class="title">

                <h1>

                    MT Games LTD

                </h1>

            </div>

            <div class="loginDisplay">



                        [ <a href="Account/Login.aspx" id="HeadLoginView_HeadLoginStatus">Log In</a> ]



            </div>

            <div class="clear topMenuContainer hideSkiplink">

                <a href="#NavigationMenu_SkipLink"><img alt="Skip Navigation Links" src="/WebResource.axd?d=RbjyXrlFzBsX7QUn2iOIQq1pniIyextRs7F3B_K9nBzVv8mpeirENaJZ5ab4b0VRcLOj22AZ4sBUNuu-Qa1e4ZDAX4puffSVufxEEatcG2U1&amp;t=634220066968172593" width="0" height="0" style="border-width:0px;" /></a><div class="menu" id="NavigationMenu">

    <ul class="level1">

        <li><a class="level1" href="Default.aspx">Home</a></li><li><a class="level1" href="Content/SavingsClub.aspx">Savings Club</a></li><li><a class="level1" href="Content/BuySellExchange.aspx">Buy Sell Exchange</a></li><li><a class="level1" href="Content/Photos.aspx">Photos</a></li><li><a class="level1" href="Content/ContactUs.aspx">Contact Us</a></li>

    </ul>

</div><a id="NavigationMenu_SkipLink"></a>

            </div>

        </div>



        <div class="main">

            <div class="clear leftMenuContainer hideSkiplink">

                <a href="#LeftNavMenu_SkipLink"><img alt="Skip Navigation Links" src="/WebResource.axd?d=RbjyXrlFzBsX7QUn2iOIQq1pniIyextRs7F3B_K9nBzVv8mpeirENaJZ5ab4b0VRcLOj22AZ4sBUNuu-Qa1e4ZDAX4puffSVufxEEatcG2U1&amp;t=634220066968172593" width="0" height="0" style="border-width:0px;" /></a><div class="leftMenu" id="LeftNavMenu">

    <ul class="level1">

        <li><a class="level1" href="Content/Consoles.aspx">Consoles, Games & Accessories</a></li><li><a class="level1" href="Content/DVDBRMusic.aspx">DVD, BLUERAY & Music</a></li><li><a class="level1" href="Content/Collectables.aspx">Collectables & Figurines</a></li><li><a class="level1" href="Content/Guns.aspx">Guns</a></li><li><a class="level1" href="Content/Knives.aspx">Knives</a></li><li><a class="level1" href="Content/Archery.aspx">Archery</a></li><li><a class="level1" href="Content/Other.aspx">Other Products</a></li>

    </ul>

</div><a id="LeftNavMenu_SkipLink"></a>

            </div>

            <div class="mainContent">



    <p>

        To learn more about ASP.NET visit <a href="http://www.asp.net" title="ASP.NET Website">www.asp.net</a>.

    </p>

    <p>

        You can also find <a href="http://go.microsoft.com/fwlink/?LinkID=152368&amp;clcid=0x409"

            title="MSDN ASP.NET Docs">documentation on ASP.NET at MSDN</a>.

    </p>



            </div>

        </div>

        <div class="clear">

        </div>

    </div>

    <div class="footer">



    </div>



<script type='text/javascript'>new Sys.WebForms.Menu({ element: 'NavigationMenu', disappearAfter: 500, orientation: 'horizontal', tabIndex: 0, disabled: false });</script><script type='text/javascript'>new Sys.WebForms.Menu({ element: 'LeftNavMenu', disappearAfter: 500, orientation: 'vertical', tabIndex: 0, disabled: false });</script></form>

</body>

</html>

Now on jsfiddle http://jsfiddle.net/hhdTe/1/ although the format is a but screwed up on there - the problem still exists. Run it in IE & Chrome and you'll see the extra padding above the menus

KJRB · Accepted Answer

Set SkipLinkText="" in the menu.

<asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" IncludeStyleBlock="false" Orientation="Horizontal" SkipLinkText="">

The padding will vanish.

Both Safari and Chrome have a problem with this. It's accessibility feature in the Menu Control. If you interested in more information: http://sim4all.com/blogging/?p=47

Toby · Answer

Just a follow-up on this. using the above methods to fix this issue is not recommended. There is a very good reason for that image being there. It is an accessibility feature to allow people with screen readers to skip navigation menus and move directly to the content.

See explanation here: http://webaim.org/techniques/skipnav/

Using display: none; hides the link from screen readers as well as visual users, rendering it useless. Changing the link text will mean that people that are looking for it will not be able to find it.

The recommended approach is to leave the image visible, yet move it off the screen. That way it cannot be seen, but screen readers will still find it. Add the below CSS to acheive this:

img[alt='Skip Navigation Links'] {
position:absolute;
left:-10000px;
top:auto;
width:1px;
height:1px;
overflow:hidden;}

That will fix the issue, without affecting accessibility.

Matty F · Answer

It's the image inside the 'skip links', not sure why you need it. Try this in your CSS:

img[alt='Skip Navigation Links'] {
    display: none;
}

Strange extra padding in chrome using standard VS 2010 template

Tags:

css

asp.net

google-chrome

Rich Andrews

3 Answers

KJRB

Toby

Matty F

Recent Activity

Donate For Us

Strange extra padding in chrome using standard VS 2010 template

Tags:

css

asp.net

google-chrome

Rich Andrews

3 Answers

KJRB

Toby

Matty F

Related questions

Recent Activity

Donate For Us