Webkit browsers pushing a bullet to the right
The website that I'm currently working on is having a few issues with Webkit browsers (Chrome, Safari, etc.) One of those issues is that I have a bullet list that is displaying strange. The top bullet item is going to the right of the list rather than the left.
(source: jamespwright.com)I can't seem to fix it. I've tried overflow:hidden, I've tried list-style-position:inside, nothing seems to work.
EDIT
I will try to provide some of the code but it's a pretty huge site that is built with DotNetNuke so I might not be able to give you too much information.
The code in question is this:
#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;
}
}
and the html for that section is this:
<div id="PremiumServicesMenu">
<div class="PremiumServicesContainer">
<span class="Corporate">
<div id="PremiumServicesHeader">
<div class="PremiumServicesShim"></div>
<div class="PremiumServicesTitle">Pr开发者_JAVA技巧emium 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>
The problem seems to be with page height. On the other browsers if the page is not very tall, this Premium Services section still retains a height that fits everything, but in Webkit if the page is short, this section shortens itself and puts the first item next to the Premium Services header image rather than on the line below it. If the page is long enough, then this issue doesn't occur.
The answer was in the floats.
The ul needed to have clear:both;
added to it.
精彩评论