Chaps, I have come across something really really odd. I won't bother you with too many details, what happened on the website I am working on, but I have managed to recreate the issue in a very simple page. Basically, it seems to me that chrome doesn't handle list-style-position very well. Let's look at an example.
<!DOCTYPE html>
<html>
<head>
<style>
.wrapper ul{
border:1px solid red;
list-style: inside disc none;
color: blue;
float:left;
margin-right:11.189%;
margin-left:8px;
}
.wrapper{
margin:0 auto;
border:1px solid blue;
}
.clear{clear:both;}
</style>
</head>
<body>
<div class="wrapper">
<ul>
<li><a href="#">Product1</a></li>
<li><a href="#">Product2</a></li>
<li><a href="#">Product3</a></li>
<li><a href="#">Product4</a></li>
<li><a href="#">Product5</a></li>
</ul>
<ul>
<li><a href="#">Product1</a></li>
<li><a href="#">Product2</a></li>
<li><a href="#">Product3</a></li>
<li><a href="#">Product4</a></li>
<li><a href="#">Product5</a></li>
</ul>
<ul>
<li><a href="#">Product1</a></li>
<li><a href="#">Product2</a></li>
<li><a href="#">Product3</a></li>
<li><a href="#">Product4</a></li>
<li><a href="#">Product5</a></li>
</ul>
<div class="clear"></div>
</div>
</body>
</html>
Right. if you save this and open it in chrome, bring up the development tool with f12, let's find the ul and disable float:left. As you expect the lists don't float anymore, but now enable the floating property again, and see what happens: you will see that the list is now broken, the bullet points are actually above the text. Repeat this making sure you first disable list-style: inside disc none; in the console: you will see that when you toggle the float property the list doestn' break anymore. And it's not just the float property, it is everything - even toggling the color when list-style: inside disc none; is enabled will break the list.
Now if in the console you change list-style: inside disc none; to list-style: outside disc none; and repeat the experiment, you will see the list won't break anymore.
"So what?" I hear you saying. Well, the reason why I am saying this is because something really weird happened to me today. I am working on a site where I have the list-style: inside disc none; applied to some of the unordered lists: well, today, all of a sudden all those lists broke, at the same time, and the bullet points are actually above the text, as you might have seen in the above experiment. That rule list-style: inside disc none; in my case has been there since day 1 (a few months ago) but today, chrome decided it didn't like it anymore. Oh, and it happens only in chrome, it works on any other browser.
One way around this is to change list-style: inside disc none; to list-style: outside disc none;: the list doesn't break anymore, but it means I have to redo all the padding work, and it's quite a bit.
I am not sure whether this is a bug or not, but it's weird
Has anybody ever come across this?
