Geek Answers Handbook

Bullets in an unordered list not contained in a block?

I am having problems with my bullets in an unordered list escaping from their block element. Is this normal or are bullets not considered part of the document flow?

In this script, my unordered list has padding-left:0, and you can see how the bullets exit the container. http://jsfiddle.net/E4WWu/1/

I had to give an unordered list to some add-ons to “fix” the problem, as shown here: http://jsfiddle.net/E4WWu/

My question is this: why are the bullet points not contained in the element <ul>? Is it something with my page in specific or is it 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;
}
+4
1

. @Chad @Mr Lister .

<ul> , PADDING . , , .

list-style-position: inside; , , .

!

+6

More articles:


All Articles