Bullets in unordered list not contained within the block?

Question

I'm having issues with my bullets on an unordered list breaking out of their block element. Is this normal, or are bullets not considered part of the document flow?

In this fiddle, my unordered list has padding-left:0 and you can see the bullets are pushing out of their container. http://jsfiddle.net/E4WWu/1/

I had to give the unordered list some padding to "fix" the problem as seen here: http://jsfiddle.net/E4WWu/

My question is this: Why are the bullet points not contained within the <ul> element? Is it something with my page in specific or is this something in HTML/CSS that I am missing?

Thanks in advance.

HTML

<div class="center-midright-container">
    <div class="infoBox"><span class="filler">Content Goes Here ...</span></div>
    <div class="innerBottom">
        <h3 class="instructHeader">Instructions<br/></h3>
        <ul class="instructText">
            <li>This is a list of instructions and this sentence is meant to be an item of the list. Each item can wrap around to the next line if it is long enough.</li>
            <li>This is a list of instructions and this sentence is meant to be an item of the list. Each item can wrap around to the next line if it is long enough.</li>
            <li>This is a list of instructions and this sentence is meant to be an item of the list. Each item can wrap around to the next line if it is long enough.</li>
        </ul>
    </div>
</div>

CSS

h3 {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
h3 {
    color:#fff;
}
ul {
    list-style-image:url('http://oi43.tinypic.com/wb8nz9.jpg');
    padding-left:10px
}
h3.instructHeader {
    text-decoration:underline;
    text-align:center;
}
.center-midright-container {
    margin:0 auto;
    width: 700px;
}
.innerBottom {
    width:80%;
    border: 3px #b51700 ridge;
    background-color:#000;
    padding:10px;
    margin:0 auto;
    margin-top:25px;
}
.instructText {
    text-align:left;
    line-height:1.5;
    color:#fff;
}
/* This is actually filled with content in my page.  Here now just for a filler */
.infoBox {
    height:500px;
    background-color:#000;
    text-align:center;
    position:relative;
}
.filler {
    position:relative;
    top:47%;
    color:#fff;
}

Kristankriste

You could try list-style-position: inside;? – Unpretentious

Wow that did it... Thanks @Chad. So I'm guessing by default the bullet points are NOT contained within the element unless you specifically tell them to be with list-style-position: inside? – Kristankriste

That's right; they normally are within the padding of the ul element. You made the padding smaller, so the li elements and their bullets all moved to the left. – Mucilaginous

Ahh ok so they are within the PADDING and not the actual element itself. That would explain it then. Learn something new everyday :) – Kristankriste

Right; the initial (default) padding of an ul is 40px. – Mucilaginous

@Unpretentious you really should add your comment as an actual answer so you can get credit. – Meri

Answer 1

Question answered in the comments. Thanks to @Chad and @Mr Lister for their help.

I failed to notice the default properties of the <ul> element in that the bullet points are contained OUTSIDE of the block by default and in the PADDING of the element instead. When I think about it, this makes sense because that would allow the text of each bullet point to line up precisely.

Adding list-style-position: inside; fixed it by placing it inside of the element instead of in the padding.

Thanks!

Kristankriste

Answer 2

The list-style-position: inside makes the li text wrap the bullet, which is often not what you want.

Making sure there is enough margin/padding on the left of the ul to encompass the bullet is the best solution, I believe.

Balsamic

do you know of any way to calculate the padding that's needed without having to make a wild guess? I'd like my bullets outside so that the list elements don't wrap - but basically I want bullets at left edge of <ul> – Flagship