I'm trying to create my photo album online using only CSS instead of tables. The problem I'm having occurs whenever I try and put text below each of the pictures. I want to have two pictures per row with text under each picture. The site I'm working on is here www.timcs.com/lbpics.aspx and the code is below.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<%@ register tagprefix="site" tagname="menu" src="menu.ascx" %>

<html>



<head>
<title>Timcs.com - Pictures</title>


<link rel="stylesheet" type="text/css" href="screen.css" media="screen" />

<style type="text/css">



ul.pictures img {
width: 35%;

}

ul.pictures li {
list-style: none;
display: inline;


}



</style>

</head>



<body>
<site:menu id="menu" runat="server" />

<p>
Just a few pics of my friends kid on his first birthday
</p>



<ul class="pictures">
<li>
<img src="/images/lb/lb_birthdayCakes.jpg"/><p>text text text</p>

</li>

<li>
<img src="/images/lb/lb_birthdayEatCake.jpg" />
</li>

<li>
<img src="/images/lb/lb_birthdayGift.jpg" />
</li>

<li>
<img src="/images/lb/lb_birthdayInBag.jpg" />
</li>

<li>
<img src="/images/lb/lb_birthdaySlide.jpg" />
</li>

<li>
<img src="/images/lb/lb_birthdayToy.jpg" />
</li>



</ul>




</body>



</html>