Étrange remplissage supplémentaire dans chrome en utilisant le modèle standard VS 2010

Question

Étrange remplissage supplémentaire dans chrome en utilisant le modèle standard VS 2010

Demandé el 23 de Janvier, 2011: Quand la question a-t-elle été
6351 affichage: Nombre de visites la question a
3 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

J'ai le code suivant légèrement modifié à partir du modèle css de Visual Studio 2010. Mon problème est que j'obtiens une marge supérieure supplémentaire d'environ 10px dans les divisions parentes des contrôles de menu, uniquement dans Chrome. Tout va bien dans IE. Que se passe-t-il ici ?

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>

Sortie HTML comme demandé...

<!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>

Maintenant sur jsfiddle http://jsfiddle.net/hhdTe/1/ Bien que le format soit un peu déréglé sur ce site, le problème existe toujours. Lancez-le dans IE et Chrome et vous verrez le remplissage supplémentaire au-dessus des menus.

Demandé el 23 de Janvier, 2011 par Rich Andrews

Answer 1

3 Réponses

Answer 2

11voto

KJRB Points 326

Définissez SkipLinkText="" dans le menu.

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

Le rembourrage disparaîtra.

Safari et Chrome ont tous deux un problème avec cela. Il s'agit d'une fonctionnalité d'accessibilité dans le contrôle du menu. Si vous souhaitez en savoir plus : http://sim4all.com/blogging/?p=47

Répondu el 13 de Février, 2011 par KJRB (326 Points )

Answer 3

6voto

Toby Points 76

Il n'est pas recommandé d'utiliser les méthodes ci-dessus pour résoudre ce problème. Il y a une très bonne raison à la présence de cette image. Il s'agit d'une fonction d'accessibilité qui permet aux personnes équipées de lecteurs d'écran de sauter les menus de navigation et d'accéder directement au contenu.

Voir l'explication ici : http://webaim.org/techniques/skipnav/

L'utilisation de display : none ; masque le lien aux lecteurs d'écran ainsi qu'aux utilisateurs visuels, ce qui le rend inutile. En modifiant le texte du lien, les personnes qui le recherchent ne pourront pas le trouver.

L'approche recommandée est de laisser l'image visible, mais de la déplacer hors de l'écran. Ainsi, elle ne pourra pas être vue, mais les lecteurs d'écran la trouveront quand même. Ajoutez le CSS ci-dessous pour y parvenir :

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

Cela permettra de résoudre le problème, sans affecter l'accessibilité.

Répondu el 21 de Mars, 2012 par Toby (76 Points )

Answer 4

2voto

Matty F Points 2194

C'est l'image qui se trouve à l'intérieur des "liens à sauter", je ne sais pas pourquoi vous en avez besoin. Essayez ceci dans votre CSS :

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

Répondu el 24 de Janvier, 2011 par Matty F (2194 Points )

Étrange remplissage supplémentaire dans chrome en utilisant le modèle standard VS 2010

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

Étrange remplissage supplémentaire dans chrome en utilisant le modèle standard VS 2010

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: