6 votes

Les navigateurs Webkit poussent une balle vers la droite

Le site web sur lequel je travaille actuellement rencontre quelques problèmes avec les navigateurs Webkit (Chrome, Safari, etc.). L'un de ces problèmes est que j'ai une liste à puces qui s'affiche bizarrement. L'un de ces problèmes est que j'ai une liste à puces qui s'affiche bizarrement. L'élément supérieur de la liste se trouve à droite plutôt qu'à gauche.

alt text
(source : <a href="http://www.jamespwright.com/images/public/screengrabs/f220646f8149dff1b6437cee66498fce.PNG" rel="nofollow noreferrer">jamespwright.com </a>)

Je n'arrive pas à le réparer. J'ai essayé overflow:hidden, j'ai essayé list-style-position:inside, rien ne semble fonctionner.

EDIT

J'essaierai de fournir une partie du code, mais il s'agit d'un site assez vaste, construit avec DotNetNuke, et il se peut donc que je ne puisse pas vous donner beaucoup d'informations.

Le code en question est le suivant :

#PremiumServicesMenu .LinkList ul {
    margin-top: 0px;
    margin-left: 1em;
    _margin-left: 3em;
    margin-bottom: 0px;
}
/* Safari and Chrome specific settings */
@media screen and (-webkit-min-device-pixel-ratio:0)
{
    .PremiumServicesContainer .LinkList ul { 
        list-style-position: inside;
    }
}

et le code html de cette section est le suivant :

<div id="PremiumServicesMenu">
    <div class="PremiumServicesContainer">
        <span class="Corporate">
            <div id="PremiumServicesHeader">
                <div class="PremiumServicesShim"></div>
                <div class="PremiumServicesTitle">Premium Services</div>
                <div class="EndCap"></div>
            </div>
        <div class="LinkList">
            <ul>
                <li><a href="#">AIMS</a></li>
                <li><a href="#">Feed Lab Analysis</a></li>
                <li><a href="#">MSDS</a></li>
                <li><a href="#">Prior Cargo</a></li>
                        </ul>
        </div>
</span>
</div>
</div>

Le problème semble se situer au niveau de la hauteur de la page. Dans les autres navigateurs, si la page n'est pas très haute, cette section Services Premium conserve une hauteur qui s'adapte à tout, mais dans Webkit, si la page est courte, cette section se raccourcit et place le premier élément à côté de l'image d'en-tête Services Premium plutôt que sur la ligne en dessous. Si la page est suffisamment longue, ce problème ne se pose pas.

14voto

James P. Wright Points 3062

La réponse se trouve dans les flotteurs. L'ul devait avoir clear:both; ajouté à ce dernier.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X