vertical aligned img needs closing tag on newline

vertical aligned img needs closing tag on newline

Hi all,

I'm just getting started with jQuery and have struck a problem with vertically center aligned images that a inserted into the DOM using jQuery.

I'm building the following DOM structure using jQuery

(styles etc removed for clarity, see test case below for details)
<div>
     <ul>
          <li><div><a><img /></a></div></li>
          ....
      </ul>
</div>


The issue is that the image will only vertically align if the anchors closing tag is on a new line. I discovered this by copying the jQuery generated html into a test page and modifying by hand like so:

<div>
     <ul>
          <li><div><a><img />
          </a></div></li>
          ....
      </ul>
</div>



At first I thought this might be a browser bug, however both IE7 and Firefox 3.5.3 are behaving the same way.

Does anyone have any ideas how to make this work using jQuery?

Many thanks and regards,
James

EXAMPLE TEST CASE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="javascript/jquery-1.3.2.js" ></script>
    <style type="text/css">

.photos
{
    float: left;
    clear: left;
    border: solid 1px black;
}

.photos ul
{
    list-style: none;
}

.photos ul li
{
    margin: 2px;
    float: left;   
}

.photos ul li img
{
    border: solid 1px #d6d6d6;
    padding: 2px;
    vertical-align: middle;
}
    </style>
   
    <script type="text/javascript" >
        jQuery(document).ready(function() {
            $(function() {
            var photos = new Array('<img src=\"http://www.apostropher.com/blog/img/death_star_2.jpg\" />', '<img src=\"http://claresiobhan.stblogs.com/wp-content/blogs.dir/143/files//2008/02/death_star1.png\" />');
                for (var i = 0; i < photos.length; i++) {
                    var a = $('<a href=\"#\" rel=\"lightbox\">' + photos[i] + '</a>');
                    var div = $('<div></div>').css("line-height", "400px").append(a);
                    var li = $('<li></li>').append(div);
                    $("#jphotos ul").append(li);
                }
            });
        });
    </script>                   
</head>
<body>

    <div class="photos" id="jphotos">                       
        <ul >
        </ul>
    </div>
    <!-- how it should look -->
    <div class="photos" >                       
        <ul >
            <li><div style="line-height: 400px"><a href="#" rel="lightbox"><img src="http://www.apostropher.com/blog/img/death_star_2.jpg" />
            </a></div></li>
            <li ><div style="line-height: 400px"><a href="#" rel="lightbox"><img src="http://claresiobhan.stblogs.com/wp-content/blogs.dir/143/files//2008/02/death_star1.png" />
            </a></div></li>           
        </ul>
    </div>
</body>
</html>