Mir-Ismaili Mir-Ismaili - 1 day ago 4
CSS Question

Why overflow-y:hidden of HTML-lists makes bullet/number to be invisible?

I set

<li>
's CSS property
overflow-y
to
hidden
, then its bullet/number has been removed. Why? What is their relation? (How can I correct it?)

Here is a simple sample (With regard to @Paulie_D answer, I added
overflow-x:visible
):



li:first-child {
overflow-y:hidden;
overflow-x:visible;
}

<ul>
<li>Unordered list - Item 1</li>
<li>Unordered list - Item 2</li>
</ul>
<ol>
<li>Ordered list - Item 1</li>
<li>Ordered list - Item 2</li>
</ol>





I ran it on Firefox v49.x and Chrome v54.x.




EDIT:
Due to some answers, I explain:

enter image description here

Bullets/Numbers are outside of x-bounds, no y-bounds!

Answer

From my reading, when you set overflow-y:hidden the overflow-x computed value is set to auto which is part of the CSS Spec.

Computed value: as specified, except with visible computing to auto if one of overflow-x or overflow-y is not visible.

...and overflow:auto

This value indicates that the box’s content is clipped to the padding box.

..and since the marker is outside of the li it's clipped and so hidden.

Comments