views:

133

answers:

4

I have a really simple set up

<div class="container">
  <ul>
    <li>Item one</li>
    <li>Item two</li>
  </ul>
</div>

I had assumed that all contents and the bullets of the ul would be within the div but currently this is not the case.

The bullet points for the UL appear outside of the div and effectively disappear when overflow is hidden.

To me this is somewhat broken and cross browser compatible, and I've scanned the HTML spec but couldn't find anything saying this should happen.

Is there a CSS fix for it or a possible layout fix?

Thanks in advance.

A: 

This kind of problems can usually be fixed using a good reset.css and re-writing all the information such as list-style and so on.

marcgg
That removes the bullet items, not sure if that is what he wanted, or if he wanted them to appear within the container.
Garrett
By removing everything he can set exactly what he wants. http://www.w3schools.com/CSS/css_reference.asp#list
marcgg
+3  A: 

You'll want to use list-style-position:

ul {
   list-style-position: inside;
}
Garrett
This is probably one of the better ways to get the bullet inside the div, however you have to keep in mind that IE vs Standards Compliant browsers (Firefox, Safari, etc) don't treat the bullet the same.
Redbeard 0x0A
It fixed it but why is it even needed? Surely you should not be able to break out of a div?
tgandrews
Welcome to the joys of CSS. Here, buy yourself a mug - http://www.zazzle.co.uk/css_is_awesome_mug-168716435071981928
Steerpike
@Garrett: it works, but the terrible side effect is that when a <li> occupies more than one line (user shrinks browser width) the new line ends up beneath the dot (number for <ol>) instead of staying aligned to the previous line.
Marco Demajo
A: 

Are you floating your List items to the left or right? If so then the following will solve your problem.

<div class="container">
  <ul>
    <li>Item one</li>
    <li>Item two</li>
  </ul>
  <div style="clear:both;"></div>
</div>
Zoidberg
You would use this trick if your div does not have the same height as your ul and li's. You would need to use this trick when using floats on the ul or li elements.
Redbeard 0x0A
Your right, but the question was pretty vague, so i gave it my best shot.
Zoidberg
A: 

You usually lose the list decorations to the overflow of a div when your UL/OL and LI don't have enough padding, or you are floating elements or display: inline.

Try adding some padding/margins to your list items (LI element).

Redbeard 0x0A