CSS Relative-Absolute positioning and content height

Question

I want to create a slideshow of images that are contained in a <ul>:

<ul>
    <li><a href="images/01/large.jpg"><img src="images/01/default.jpg"></a></li>
    <li><a href="images/02/large.jpg"><img src="images/02/default.jpg"></a></li>
    <li><a href="images/03/large.jpg"><img src="images/03/default.jpg"></a></li>
    <li><a href="images/04/large.jpg"><img src="images/04/default.jpg"></a></li>
    <li><a href="images/05/large.jpg"><img src="images/05/default.jpg"></a></li>
    <li><a href="images/06/large.jpg"><img src="images/06/default.jpg"></a></li>
    <li><a href="images/07/large.jpg"><img src="images/07/default.jpg"></a></li>
    <li><a href="images/08/large.jpg"><img src="images/08/default.jpg"></a></li>
    <li><a href="images/09/large.jpg"><img src="images/09/default.jpg"></a></li>
    <li><a href="images/10/large.jpg"><img src="images/10/default.jpg"></a></li>
    <li><a href="images/11/large.jpg"><img src="images/11/default.jpg"></a></li>
    <li><a href="images/12/large.jpg"><img src="images/12/default.jpg"></a></li>
    <li><a href="images/13/large.jpg"><img src="images/13/default.jpg"></a></li>
</ul>
<style>
    ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        position: relative;
    }
    li {
        display: none;
        list-style-type:none;
        margin:0;
        padding:0;
        position: absolute;
    }
</style>

You can see that the html markup and CSS is pretty straight forward. The problem I have is that although all images are of same size, the size is not known in advance. I therefore cannot set a fixed height on the <ul> but I really have to -- because the absolute positioned elements inside relative positioned element means that the container has zero height and the images start to appear over the content below it.

I am using jQuery so please guide me towards a CSS and/or jQuery based solution. Please note that I 've already tried:

$("ul").height(
    $("ul li:eq(0)").outerheight()
)

but, on document ready, the images are not loaded and hence the height is unknown. I also tried adding a delay/waiting for $("ul li:eq(0)").outerheight() > 0 but this gives problems in IE. IE often returns a value greater than zero when it has partially downloaded the image but this value if often less than actual image height. Let me know if you need any clarification.

Answer 1

And by doing this?

$("ul").css({
   height: $("ul li:eq(0)").find("img").outerheight()
});

Answer 2

For example:

var width, height;

$('ul img').load( function () {
    width  = this.width;
    height = this.height;
});

Borrows from the answer to this question http://stackoverflow.com/questions/318630/get-real-image-width-and-height-with-javascript-in-safari-chrome

Answer 3

I would say it'd be technically better to do this from the opposite angle. Remove the display: none; from your CSS, then get the height of the box when the page loads (this way, without javascript people can still see the images). Then, set the display property of the li's to none via javascript.

You get the height, and the same functionality!