Question

I have a div with two unordered lists within it.

Using Firebug the height of each unordered list (as shown in the layout tab) is 35px and 38px respectively, yet the height of the parent div is 41px.

What would cause this?

Here is a stripped example of the code as it is on an internal development server I can’t link to it!:

<div class="actions">
    <ul class="first-ul"></ul>
    <ul class="second-ul"></ul>
</div>

    header.header .actions ul {
        display: inline;
        list-style-type: none;
        margin: 0;
        padding: 0;
        vertical-align: bottom;
    }
    header.header .actions ul.first-ul {
        float: left;
    }

Answer 1

I’ve had similar problems – in my case the height was caused by whitespace characters between the ul and li elements, which was really hard to figure out, even with a DOM inspector. Changing from this

<ul>
    <li></li>
    <li></li>
</ul>

to this:

<ul><li></li><li></li></ul>

fixed it for me. Not sure if this is the same issue, but worth trying.