Skip to content Skip to sidebar Skip to footer
Home / Css / Firefox / Google Chrome / Html

Overflow:hidden On Div In Ordered List Affects Li, Chrome Bug?

Post a Comment
I'm inclined to think this is a bug in Chrome (why would a style on a child element affect the parent?), but there might be something else going on that I'm not understanding. The

Solution 1:

Well, this is a kind of a hack, but it works. Adding a pseudo :before-element brings back the list style, as the li will have some content now. Bring back the div to the top and it looks like nothing has changed.

CSS

ol > li:before {
    content: '';
    display: block;
    height: 1px;
}

div {
    margin-top: -1px;
}

Demo

Try before buy

Solution 2:

This isn't a bug so to speak, more of a difference in how different browser engines render the CSS. (Blink vs Trident vs Gecko vs WebKit etc)

Technically speaking, the Chrome display is correct due to hiding everything outside of the div as specified with overflow: hidden;.

If you use the Chrome Inspector, you can see where the edges of the elements are and the number is outside of that area.

Your best work-around would be to set an additional piece of CSS to override the main div element.

ol {
  list-style-position: outside;
}
div {
  overflow: hidden;
}
oldiv {
  overflow: visible;
}
<!doctype html><html><body><ol><li><div>Some text</div></li></ol></body></html>

Solution 3:

If you need to use the div inside li, display the div as inline, otherwise list-style: inside will work.

ol {
  list-style-position: outside;
}

div {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 150px; display: inline;
}
<ol><li><div>Some text</div></li></ol>

Solution 4:

Define selectors for these elements.

Your going to began to run into problems if your just using global tags: <li> <div> especially since your nesting here.

eg:<li class="dothis"> <div class="thisdivdoes"> ...

After you do this it would be easier to differentiate overflow:hidden; where and not where.

Since your tag is within your <li> define what you want them to do individually since that's what you want to do, or else you may see them inherit each other as your experiencing.

Also, check your doctype in HTML5 I think it's not valid while in strict it may be.

Post a Comment for "Overflow:hidden On Div In Ordered List Affects Li, Chrome Bug?"