Mir-Ismaili Mir-Ismaili - 1 year ago 77
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 Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download