On one of the pages of my website, I'm dealing with a formatting issue involving a <ul>. Inside each <li> in the list, there is both an image and some accompanying text. However, when I try to place the image first followed by the text, the text gets pushed down and doesn't align properly. I attempted to use vertical-align: text-top on the image, but this only shifted the text to the top without allowing it to move down as more text was added.
If you'd like to see the issue for yourself, check out the JSFiddle link here - http://jsfiddle.net/kh4xC/
Here's the HTML code snippet:
<div id="older-videos">
<ul>
<li>
<img src="../Images/Article Images/GuliyevFace14.png" class="li-image" />
Heydər Oğuzun Rəsul Quliyevlə Müsahibəsi - 29 İyul 2012, 2-ci hissə
</li>
</ul>
</div>
And the corresponding CSS code:
#older-videos ul li {
display:block;
width:600px;
height:162px;
background-color:#EEEEEE;
}
#older-videos ul li img{ vertical-align:text-top;
}
.li-image {
width:250px;
height:162px;
-moz-box-shadow: 10px 10px 5px #888;
-webkit-box-shadow: 10px 10px 5px #888;
box-shadow: 5px 1px 5px #888;
}