CODEWITHSUNDEEP
htmlcsshtml-lists
Shaun
Shaun

Reputation: 1220

Bullets in unordered list not contained within the block?

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;
}

Upvotes: 8

Views: 9823

Answers (2)

Gringo Suave
Gringo Suave

Reputation: 31860

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.

Upvotes: 0

Shaun
Shaun

Reputation: 1220

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!

Upvotes: 17

Related Questions