Why isn't the inline element inheriting height from its children?
- by jbarz
I'm trying to make a rather complicated grid of images and information (almost like Pinterest). Specifically, I'm trying to inline position one set of <ul>s right after another. I have it working but one aspect is causing issues so I'm trying to ask about this small piece to avoid the complication of the whole problem.
In order to horizontally align the images and their information we are using inline <li>s with other inline-block level elements inside of them. Everything works correctly for the most part except that the <li>s have almost no height.
HTML and CSS is in JSFiddle here if you want to mess with it in addition to below:
HTML:
<div>
<ul class="Container">
<li>
<span class="Item">
<a href="#"><img src="http://jsfiddle.net/img/logo.png"/></a>
<span class="Info">
<a href="#">Title One</a>
<span class="Details">One Point One</span>
</span>
</span>
</li>
<li>
<span class="Item">
<a href="#"><img src="http://jsfiddle.net/img/logo.png"/></a>
<span class="Info">
<a href="#">Title Two</a>
<span class="Details">Two Point One</span>
</span>
</span>
</li>
</ul>
CSS:
.Container {
list-style-type:none;
}
.Container li {
background-color:grey;
display:inline;
text-align:center;
}
.Container li .Item {
border:solid 2px #ccc;
display:inline-block;
min-height:50px;
vertical-align:top;
width:170px;
}
.Container li .Item .Info {
display:inline-block;
}
.Container li .Item .Info a {
display:inline-block;
width:160px;
}
If you check out the result in the jsfiddle link you can see that the grey background only encompasses a small strip of the whole <li>. I know that changing the <li> to display:inline-block solves this problem but that isn't feasible for other reasons.
So first of all, I'm just looking to see if anyone understands why the inline <li> element doesn't have any height. I can't find anything in the spec that explains this. I know I can't add height to an inline element but any explanation as to why this is happening that might enable me to fix would be great.
Secondly, if you inspect the elements using IE's Developer Mode you will see that although the background color is in the correct location, the actual location of the <li>'s bounding box is at the bottom of the container according to hovering over the element. I could deal with this problem if it was at the top in every browser but it apparently varies.
NOTE: I don't really care about older browsers in this case but I don't use HTML5 or JavaScript positioning.
Thanks.
