Css UL LI alignment of images - css

Question

I have this html code:
<ul id="top-bar">
<li class="top-icon-block"><img src="images/home.png"></li>
<li class="top-icon-sep-block"><img src="images/top_icon_separator.png"></li>
<li class="top-icon-block"><img src="images/home.png"></li>
</ul>
and the relevant css looks like this:
#top-bar {
width: inherit;
height: 40px;
padding: 0px;
margin: 0px;
vertical-align: middle;
display: table-row;
}
.top-icon-block {
width: 50px;
margin: 0px;
background-image: url("images/top_bar_bg.png");
background-repeat: repeat-x;
display: table-cell;
text-align: center;
}
li.top-icon-block img {
padding-top: 8px;
vertical-align: middle;
}
.top-icon-sep-block {
width: 4px;
margin: 0px;
background-image: url("images/top_bar_bg.png");
background-repeat: repeat-x;
display: table-cell;
text-align: center;
}
li.top-icon-sep-block img {
padding-top: 18px;
vertical-align: middle;
}
for some reason, All of the images are aligned based on the highest padding-top, whereas I really need them to be differ.
Here is a jsfiddle: http://jsfiddle.net/XWdMP/

Answer 1

If I understand your issue correctly, it is because the padding is different on your elements, but it is being rendered inline with the larger padding. Effectively pushing down your other two images.
Adding a overflow hidden to your li elements should resolve the problem and hide the gap being shown from the difference in padding from the images.
#top-bar li {
overflow: hidden;
}
Let me know if that resolves the issue.
http://jsfiddle.net/rakkeh/XWdMP/1/