max-height % not working in all browsers

Im trying to set the max-height in perce开发者_开发技巧ntages on a li tag but doesn't seem to work (currently working in Chrome/Mac), however setting in pixels works.

I need the items to scale with browser dimensions, this is why I need to work in percentages.

HTML

    <div class="portfolio_items">
        <div id="slideshow">
            <ul>
                <li><img src="images/_test/_scroll1.jpg" alt="" class="active" /></li>
            <li><img src="images/_test/_scroll2.jpg" alt="" /></li>
            <li><img src="images/_test/_scroll3.jpg" alt="" /></li>
            <li><img src="images/_test/_scroll4.jpg" alt="" /></li>

            <li><h1><?php the_title(); ?></h1>
                    <h2>Client: Test</h2>
                    <h2>Agency: <a href="#">...</h2>
                    <a href="#" target="_blank">Visit site</a></li>
                </ul>
            </div><!-- slideshow END -->

        <img src="images/_test/project-viewer.jpg">
            </div><!-- portfolio_items END -->

CSS

#slideshow {
    position:relative;
    max-width: 900px;
    }
#slideshow ul {
    float: left;
    margin-top: 3.7%;
    }
#slideshow li {
    background: aqua;
    position:absolute;
    max-width: 900px;
    width: 92.12%;
    margin-left: 4.3%;
    z-index:8;
    }
#slideshow li.active {
    z-index:10;
    }
#slideshow li.last-active {
    z-index:9;
    }

*Live example: * http://www.warface.co.uk/clients/warface.co.uk/testv2

-- Edit -- The desired effect, the blue box will cover the monitor display

Try this:

#slideshow {
position:relative;
max-width: 900px;
width: 100%;
}

Hope it works.