Different position of div's containing text and divs containing images

Question

I got a problem with the outlining of some div elements.

I got the following structure.

<div id="skillcontent">
  <div id="skillname" class="inline">
   <div class="skilllist">
    <div><h3>[SKILL]</h3></div>
    <div><h3>[SKILL]</h3></div>
   </div>
  </div>

  <div id="skillstars" class="inline">
   <div class="skilllist">
    <div>
     <img src="img/star_active.png" alt="" />
     <img src="img/star_active.png" alt="" />
     <img src="img/star_inactive.png" alt="" />
     <img src="img/star_inactive.png" alt="" />
     <img src="img/star_inactive.png" alt="" />
    </div>
    <div>
     <img src="img/star_active.png" alt="" />
     <img src="img/star_active.png" alt="" />
     <img src="img/star_active.png" alt="" />
     <img src="img/star_inactive.png" alt="" />
     <img src="img/star_inactive.png" alt="" />
    </div>
   </div>
  </div>

  <div id="skillinfo" class="inline">
   <div class="skilllist">
    <div><h4>[YEARS],[LEVEL]</h4></div>
    <div><h4>[YEARS],[LEVEL]</h4></div>
   </div>
  </div>
 </div>

Css:

.skilllist div {
    padding: 0px;
    margin: 0px;
    display: block;
    height: 25px; /*same height as star images*/
}

div.inline {
    display: inline-block;
}

h3 {
    font-size: 18px;
    color: #5b5b5b;
    margin: 0px;
}

h4 {
    font-size: 18px;
    color: #808080;
    margin: 0px;
}

img {
    vertical-align: bottom;
}

The divs that contain the text (h3 and h4) elements are a bit smaller as the divs that contain images. There is no margin or padding on any element. The height of all of the divs is the same but there still is some whitespace on top of the divs with the class skilllist that contain text. There is no whitespace above the div that contains images. Why is this and how can i fix it?

Example: Click

Answer 1

try adding vertical-align:top; to your css on all items misaligned. worked when i did this using firebug on your test page.