Question

I have a ul with li’s which in turn contains some divs. You could see it on jsFiddle: http://jsfiddle.net/rtKra/

Here is the ul structure:

<ul class="categoryListing">

<li class="category">
    <div class="hoverMenu">
        <a class="edit">
            <img class="hoverButton editIcon" src="${baseRef}/images/editpencil.png"/>
        </a>
        <a class="delete">
            <img class="hoverButton deleteIcon" src="${baseRef}/images/deleteredicon.png"/>
        </a>
    </div>

    <div style="width:20px; height:20px; background-color:red; position:relative; top:2px; margin:0; padding:0; float:left; border-radius:2px; text-align:center;"><div class="arrow-down"></div></div>
    <div style="width:185px; margin:0; padding:0; float:right; z-index:100; display:visible;">Here is the name of the category that you want to use</div>
    <!--DISAPPEARING DIV-->


</li>

<li class="category">
    <div class="hoverMenu">
        <a class="edit">
            <img class="hoverButton editIcon" src="${baseRef}/images/editpencil.png"/>
        </a>
        <a class="delete">
            <img class="hoverButton deleteIcon" src="${baseRef}/images/deleteredicon.png"/>
        </a>
    </div>
    <div style="position:relative; display:block">
        <div style="width:20px; height:20px; background-color:yellow; position:relative; top:2px; margin:0; padding:0; float:left; border-radius:2px; text-align:center;">&#9660;</div>
        <div style="width:185px; margin:0; padding:0; float:right;">Here is the name of the category that you want to use</div>
    </div>
</li>
</ul>

The thing is that the div with the content just disappears if it’s not within an outer div which
has style set to display:block. Is there a reason for that happening??

I’m using the inline style only for testing out the layout…the styles for the ul and li, can be seen on the above url if you wish. But am I missing some CSS thing that is preventing the div from showing? Why is that?

Answer 1

I can’t reproduce it here (I’ve only got Firefox on this machine), but I think I can guess what the problem is:

The problem is likely to be because the <div> is contained within an <li>, and because the <div> is styled by default as display:block;, whereas the <li> is styled by default as display:list-item;.

display:list-item works similarly to display:inline in that it cannot contain block elements. The rules say you cannot have a block element inside an inline element. It doesn’t make sense.

Obviously people do this all the time, and the browsers have to be able to cope with it, but it is an error, and some browsers will cope better than others.

The solution to the problem is to style the <li> as display:inline-block;.

inline-block is a way of styling the display property such that the element remains inline in relation to the other elements around it, but can contain block type contents.

So add this CSS and you should be fine:

li.category { display:inline-block; }

Hope that helps. As I say, I can’t test it here, but please let me know if it solves the problem.