webkit shows bullet behind floated elements in list

Question

span {
  float: left;
  width: 200px;
}

<ul>
  <li><span>test</span></li>
</ul>

Have a look at this in firefox vs chrome, chrome will show the bullet after the floated span element.

I'm not really sure what is happening here, seems the float is escaping the list item in webkit. Anyone come across this and know a solution?

This is a very old WebKit bug - floats interfere greatly with list bullets for some reason. — BoltClock, Feb 19 '16 at 16:40
not sure if its a solution but you can use a p tag and take up the span using margin-top -- https://jsfiddle.net/btc6ydab/ — Tasos, Feb 19 '16 at 16:42
Reference to bug: https://bugs.webkit.org/show_bug.cgi?id=89829 — silviagreen, Feb 19 '16 at 16:43
bullets could be produce via a css counter , choosing any image or text to show — G-Cyrillus, Feb 19 '16 at 20:27

score 4 · Accepted Answer · edited May 23 '17 at 10:28

4

As pointed out by @silviagreen this is a webkit-specific bug but as a workaround I suggest to add a transparent border to the list-item. This seems to properly work (but I honestly admit that I can't figure out why this should work)

li {
   border: 1px transparent solid;
}

https://jsfiddle.net/rjkz7ny1/

Other approaches suggest to change float: left into display: inline-block or to give clear: left to the list, but I feel these workarounds a bit too substantial (and not always appliable) than adding a trasparent border.

edited May 23 '17 at 10:28

Community

1
1

answered Feb 19 '16 at 16:34

Fabrizio Calderan

120,726
26
164
177

Clever! I'd love to know why this works. Did you discover this yourself or is it a known fix for float issues? – Sabrina Feb 19 '16 at 16:55
@Stef I've just discovered it playing around the OP's fiddle. I've also tried a bunch of other properties with no luck – Fabrizio Calderan Feb 19 '16 at 16:56
@Stef: "I'd love to know why this works." Because it's WebKit ;) – BoltClock Feb 19 '16 at 16:57
Well kudos to you! How you even thought to try that is mind boggling. @BoltClock LOL – Sabrina Feb 19 '16 at 16:58
So weird. Specifically, it's `border-top`, or `padding-top`. – Oriol Feb 19 '16 at 17:05
But in all seriousness, I have reason to believe WebKit's implementation of `display: list-item` is way, *way* off. See http://stackoverflow.com/questions/21769248/list-with-nested-overflow-x-hidden-hides-list-counter-point-why-is-this-a-b/21778308#21778308 for an example of another WebKit list-item bug where I explain my theory. cc @Stef – BoltClock Feb 19 '16 at 17:09

score 0 · Answer 2 · answered Feb 19 '16 at 20:39

A pseudo element, with a CSS counter for ol list can be used to avoid bug and use of borders

span {
  float: left;
  width: 200px;
}
ol {
  counter-reset:marker;
  }
li {
  counter-increment:marker;
  list-style-type:none;
  box-shadow:0 2px gray;
  }
li:before {
  content:'\02022 ';
  padding-right:0.25em;
  float:left;
  }
ol li:before {
  content:counter(marker)'. ';
  }
hr ~* li:before {
  text-indent:-1em;
  }
li:after {
  content:'';
  display:table;
  clear:both;

<ul>
  <li><span>test</span></li>
  <li><span>test</span></li>
</ul>
<ol>
  <li><span>test</span></li>
  <li><span>test</span></li>
</ol>
<hr/>
<ul>
  <li><span>test</span></li>
  <li><span>test</span></li>
</ul>
<ol>
  <li><span>test</span></li>
  <li><span>test</span></li>
</ol>

webkit shows bullet behind floated elements in list

2 Answers2

Linked

Related