CSS - Firefox - Getting Child elements to sit inside the parent element

All,

Here is the code.

#feature_tabs_indicators {
display: block;
height: 14.5px;
background-color: rgb(244,1,87);
}
#feature_tabs_indicators ul {
    display: block;
    height: 14.5px;
    text-align: center;
    padding: 0;
    margin: 0 auto;
}
    #feature_tabs_indicators ul li {
        display: inline;
        width: auto;
        height: 14.5px;
        list-style-type: none;
        background-color: rgb(34,61,166);
        padding: 0 5px;
        margin: 0;
    }

An now the HTML:

<div id="feature_tabs_indicators">
        <ul>
            <li id="ind_bt" class="c_ind">.</li>
            <li id="ind_st" class="c_ind">.</li>
            <li id="ind_lc" class="c_ind">.</li>
            <li id="ind_rb" class="c_ind">.</li>
            <li id="ind_lg" class="c_ind">.</li>
        </ul>
    </div>

Jsfiddle.net

Problem: When I run the code in Chrome, IE9, all looks well, i.e. the blue squares in the middle are sitting on the r开发者_如何学编程ed line (parent). However, when I run this in Firefox, their appears a sit slightly below the parent. You can see the thin red line peeking out on top of the blue squares.

Why is this and how can I resolve this.

---

Check inline to inline-block on your LI.

 #feature_tabs_indicators ul li {
            display: inline-block;
...
}

---

@salman Khan; give inline-block to your #feature_tabs_indicators ul li .

The reason why li's not come inside the parent because inline element never take vertical margin & padding. That's why parent take the height of the text only.

check this article http://www.maxdesign.com.au/articles/inline/