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.
(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.