Ini adalah lanjutan dari Posting saya sebelumnya tentang bagaimana cara membuat sebuah album foto dengan style Horizontal Film strips.

Kali ini saya mencoba untuk membuat sebuah album Foto dengan style Film Strips Versi Vertikal.

Pada prinsifnya tidak ada yang berbeda antara versi Vertikal maupun Horizontal, karena kedua versi tersebut sama-sama menggunakan 2 buah gambar kecil (thumnail), yaitu gambar versi negative dan Positive.

Dan perbedaannya mungkin hanya dalam penempatan dan tata letaknya saja. Untuk lebih jelas lagi silahkan anda coba lihat Demonstrasinya.

<style type="text/css">
/* ================================================================
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menu/filmstrip-v2.html
Copyright (c) 2005- Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any
way to fit your requirements.
=================================================================== */

/* defaults required for IE */
a, a:visited, a:hover, a:active, a:focus {color:#000;}

#holder {position:relative; background:url(filmstripv2/screen.png); padding:10px 0 10px 630px; width:120px; height:600px; font-family:arial, sans-serif; margin:0 auto;}
p.instructions {position:absolute; left:90px; top:100px; width:450px; font-size:13px; color:#069; line-height:20px; text-align:justify;}
#scrollContainer {width:115px; height:600px; overflow:auto;}

#scrollbox {padding:0; margin:0; width:92px; list-style:none; height:1720px;}
#scrollbox ul {padding:0; margin:0; list-style:none; position:absolute; left:-9999px; top:-9999px;}
#scrollbox table {border-collapse:collapse:width:0; height:0; margin:-4px;}
#scrollbox li {float:left; width:92px; height:86px; background:url(filmstripv2/35mm.gif);}


#scrollbox a {display:block; color:#999; text-decoration:none; width:92px; height:86px;}

#scrollbox a.slidea {background:url(filmstripv2/pic_7vt.jpg) no-repeat center center;}
#scrollbox a.slideb {background:url(filmstripv2/pic_10ht.jpg) no-repeat center center;}
#scrollbox a.slidec {background:url(filmstripv2/pic_12vt.jpg) no-repeat center center;}
#scrollbox a.slided {background:url(filmstripv2/pic_15vt.jpg) no-repeat center center;}
#scrollbox a.slidee {background:url(filmstripv2/pic_16vt.jpg) no-repeat center center;}
#scrollbox a.slidef {background:url(filmstripv2/pic_20vt.jpg) no-repeat center center;}
#scrollbox a.slideg {background:url(filmstripv2/pic_21vt.jpg) no-repeat center center;}
#scrollbox a.slideh {background:url(filmstripv2/pic_22vt.jpg) no-repeat center center;}
#scrollbox a.slidei {background:url(filmstripv2/pic_23ht.jpg) no-repeat center center;}
#scrollbox a.slidej {background:url(filmstripv2/pic_23vt.jpg) no-repeat center center;}
#scrollbox a.slidek {background:url(filmstripv2/pic_26vt.jpg) no-repeat center center;}
#scrollbox a.slidel {background:url(filmstripv2/pic_28ht.jpg) no-repeat center center;}
#scrollbox a.slidem {background:url(filmstripv2/pic_30ht.jpg) no-repeat center center;}
#scrollbox a.sliden {background:url(filmstripv2/pic_38ht.jpg) no-repeat center center;}
#scrollbox a.slideo {background:url(filmstripv2/pic_38vt.jpg) no-repeat center center;}
#scrollbox a.slidep {background:url(filmstripv2/pic_39ht.jpg) no-repeat center center;}
#scrollbox a.slideq {background:url(filmstripv2/pic_40ht.jpg) no-repeat center center;}
#scrollbox a.slider {background:url(filmstripv2/pic_48vt.jpg) no-repeat center center;}
#scrollbox a.slides {background:url(filmstripv2/pic_49vt.jpg) no-repeat center center;}
#scrollbox a.slidet {background:url(filmstripv2/pic_50ht.jpg) no-repeat center center;}

#scrollbox a img.thumb {width:60px; height:80px; display:block; padding:3px 16px; border:0;}

#scrollbox a:hover {border:0;}
#scrollbox a:hover img.thumb {display:none;}
#scrollbox :hover > a img.thumb {display:none;}


#scrollbox :hover ul {width:600px; height:600px; left:0; top:10px; padding-right:15px; padding-left:15px; background:transparent; z-index:100;}
#scrollbox :hover ul li {width:600px; height:600px; display:block; background:transparent;}
#scrollbox :hover ul li a {display:block; width:600px; height:600px;}
#scrollbox :hover ul li a img {display:block; border:0; margin:0 auto;}
#scrollbox :hover ul li.landscape a img {display:block; padding-top:75px;}

#scrollbox :hover ul li a span {position:absolute; left:-9999px; bottom:0;}
#scrollbox :hover ul li a:hover span b {display:block; font-size:16px; padding:0 0 10px 0;}

#scrollbox :hover ul li a:hover span {left:90px; bottom:0; padding:10px; width:430px; background:url(); color:#fff; text-align:left; font-size:12px; line-height:18px;}
#scrollbox :hover ul li.landscape a:hover span {left:15px; bottom:75px; width:580px;}



</style>
<!--[if lte IE 6]>
<style type="text/css">
#scrollbox :hover ul li a:hover span { {
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='filmstripv2/backing.png', sizingMethod='scale');
}
</style>
<![endif]-->

<div id="holder">
<div id="scrollContainer">
<p class="instructions">Hover over the filmstrip to turn the negative images into the positive versions and display the full size image here.<br /><br />
Hover over the full size image to see the descriptive text.<br /><br />
</p>
<ul id="scrollbox">
<li><a class="slidea" href="#nogo"><img class="thumb" src="filmstripv2/pic_7vtn.jpg" alt="" /><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#url"><img src="filmstripv2/pic_7v.jpg" alt="" /><span><b>Etiam</b> Adipiscing pharetra velit a rutrum. Aenean volutpat rutrum risus ut congue. Phasellus bibendum accumsan sapien in vulputate. Nam pellentesque pellentesque ligula in laoreet. Cras gravida convallis commodo. Mauris interdum turpis non lectus lacinia quis eleifend ipsum tincidunt. Donec laoreet, mi sit amet lacinia vehicula, ligula erat fermentum eros, ut placerat mauris tortor sit amet tortor. In velit nunc.</span></a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a class="slideb" href="#nogo"><img class="thumb" src="filmstripv2/pic_10htn.jpg" alt="" /><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li class="landscape"><a href="#url"><img src="filmstripv2/pic_10h.jpg" alt="" /><span><b>Nam at</b> Metus dui, at congue lectus. Praesent vitae dolor ut eros tincidunt tincidunt sit amet tincidunt orci. Donec imperdiet nibh a lacus aliquam vulputate eget eget quam. Maecenas turpis arcu, tristique in tristique ut, elementum a ipsum. Integer elit orci, lobortis a dapibus eget, consequat at libero. Pellentesque sagittis magna vitae augue lobortis eget tincidunt est tempus. Praesent lacinia nulla id ligula mollis id pharetra mauris luctus.</span></a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a class="slidec" href="#nogo"><img class="thumb" src="filmstripv2/pic_12vtn.jpg" alt="" /><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#url"><img src="filmstripv2/pic_12v.jpg" alt="" /><span><b>Proin</b> In nisi vitae nulla molestie cursus. Cras et justo elit, sit amet vestibulum mauris. Fusce sodales feugiat ligula et tempor. Maecenas ultricies, dolor eu scelerisque pellentesque, elit turpis fermentum lectus, eu ultricies eros nisi vestibulum felis. Nullam quis facilisis augue. Integer rhoncus ornare mi.</span></a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a class="slided" href="#nogo"><img class="thumb" src="filmstripv2/pic_15vtn.jpg" alt="" /><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#url"><img src="filmstripv2/pic_15v.jpg" alt="" /><span><b>Cras vulputate</b> Nisl quis risus consequat auctor. Phasellus elit leo, interdum et facilisis in, mollis sit amet purus. Nam ullamcorper nunc id purus accumsan vitae vestibulum lectus rutrum. Vestibulum egestas aliquet mauris, nec dictum massa pellentesque eget. Suspendisse sem dolor.</span></a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a class="slidee" href="#nogo"><img class="thumb" src="filmstripv2/pic_16vtn.jpg" alt="" /><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#url"><img src="filmstripv2/pic_16v.jpg" alt="" /><span><b>Nam a quam</b> Erat, vel tristique ante. Donec ornare nibh sed nisi cursus volutpat. Donec at sapien felis. Vivamus eu sapien ante, at convallis libero. Mauris semper mi quis enim condimentum pulvinar. Sed non commodo felis. Donec lorem est, pulvinar eget pellentesque ultrices, varius ac est. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a class="slidef" href="#nogo"><img class="thumb" src="filmstripv2/pic_20vtn.jpg" alt="" /><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#url"><img src="filmstripv2/pic_20v.jpg" alt="" /><span><b>Morbi</b> Justo dolor, tristique a sagittis hendrerit, eleifend at nisi. Donec vitae sem id sapien lobortis pharetra quis vitae purus. Quisque a ligula non diam cursus semper. Fusce posuere elementum ligula a suscipit. Suspendisse placerat, urna et egestas imperdiet, orci tortor imperdiet est, eget varius arcu lectus eget urna.</span></a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a class="slideg" href="#nogo"><img class="thumb" src="filmstripv2/pic_21vtn.jpg" alt="" /><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#url"><img src="filmstripv2/pic_21v.jpg" alt="" /><span><b>Sed tincidunt</b> Elit a lacinia tristique, lectus enim auctor lorem, a molestie purus diam ac enim. Aenean sit amet feugiat arcu. Sed vitae porta orci. Quisque non nunc nibh, eu mattis nibh. Mauris molestie, arcu vel dictum scelerisque, mauris risus hendrerit est, vitae lacinia lorem justo at nunc. Vivamus condimentum, eros a placerat cursus.</span></a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a class="slideh" href="#nogo"><img class="thumb" src="filmstripv2/pic_22vtn.jpg" alt="" /><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#url"><img src="filmstripv2/pic_22v.jpg" alt="" /><span><b>Praesent</b> Id neque metus, vel pulvinar erat. Integer rutrum ligula id mi commodo convallis. Pellentesque nisi justo, accumsan in pulvinar in, cursus ut purus. Aliquam turpis lacus, ultricies quis accumsan sed, blandit at diam. Fusce vitae nibh sapien. Nullam blandit nunc vehicula eros sagittis porta. Mauris pulvinar sodales tortor, vel ornare sem condimentum quis.</span></a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a class="slidei" href="#nogo"><img class="thumb" src="filmstripv2/pic_23htn.jpg" alt="" /><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li class="landscape"><a href="#url"><img src="filmstripv2/pic_23h.jpg" alt="" /><span><b>Aenean sit</b> Amet odio id eros ullamcorper congue non id dui. Nulla dictum aliquam vehicula. In ut consequat massa. Curabitur sed nibh felis. Vestibulum mauris libero, rhoncus ut tristique eu, iaculis at urna. Donec tristique rhoncus dui ac condimentum. Duis id augue at odio volutpat commodo non et nulla. Praesent lacinia eros a arcu aliquam congue. Nullam ut purus eu magna scelerisque imperdiet ut quis arcu. Aliquam odio justo, auctor nec vestibulum eu, aliquet sit amet dolor.</span></a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a class="slidej" href="#nogo"><img class="thumb" src="filmstripv2/pic_23vtn.jpg" alt="" /><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#url"><img src="filmstripv2/pic_23v.jpg" alt="" /><span><b>Ut quis</b> Est ligula, in suscipit nisi. Cras vitae dolor ac sem eleifend luctus. Nunc iaculis, mi vitae placerat luctus, odio sapien egestas erat, eu cursus nisl risus in risus. Curabitur sit amet velit mi. Proin non nibh enim. Duis purus mauris, gravida in egestas eget, faucibus eget purus. Aliquam vitae nulla augue, et posuere eros. Nulla sed nibh in augue condimentum mattis ut vitae eros. Pellentesque imperdiet eleifend leo, vitae blandit augue faucibus et. Phasellus sodales feugiat bibendum.</span></a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a class="slidek" href="#nogo"><img class="thumb" src="filmstripv2/pic_26vtn.jpg" alt="" /><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#url"><img src="filmstripv2/pic_26v.jpg" alt="" /><span><b>Morbi</b> Ac rhoncus ante. Donec molestie justo quis eros dictum non consequat libero convallis. Ut ornare lacinia sagittis. Pellentesque sit amet placerat est. Morbi luctus eros nec dui convallis suscipit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce nibh lectus, suscipit eget congue sit amet, tempus id magna.</span></a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a class="slidel" href="#nogo"><img class="thumb" src="filmstripv2/pic_28htn.jpg" alt="" /><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li class="landscape"><a href="#url"><img src="filmstripv2/pic_28h.jpg" alt="" /><span><b>Aliquam</b> Ultricies posuere urna, in tincidunt leo dignissim sed. In magna ante, elementum eget semper id, dapibus ac neque. Donec consequat fringilla auctor. Suspendisse in erat neque. Mauris luctus gravida elit eget fringilla. Sed non leo ipsum, vitae viverra orci. Duis tincidunt augue leo, vitae laoreet urna.</span></a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a class="slidem" href="#nogo"><img class="thumb" src="filmstripv2/pic_30htn.jpg" alt="" /><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li class="landscape"><a href="#url"><img src="filmstripv2/pic_30h.jpg" alt="" /><span><b>Sed laoreet</b> Rhoncus orci vitae venenatis. Phasellus accumsan ultricies nulla et interdum. Vivamus condimentum, purus eget egestas vulputate, libero nunc scelerisque tellus, eleifend scelerisque ligula sapien at nibh. Donec vel nisl sapien. Etiam lacinia felis sit amet ligula mollis ultrices. Vestibulum non mattis velit. Aenean eget magna nisl. Praesent viverra sem sit amet enim molestie nec pharetra nisl elementum. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a class="sliden" href="#nogo"><img class="thumb" src="filmstripv2/pic_38htn.jpg" alt="" /><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li class="landscape"><a href="#url"><img src="filmstripv2/pic_38h.jpg" alt="" /><span><b>Sed id</b> Fringilla ante. Nullam ornare tempor porta. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris lacinia massa vel ante varius quis scelerisque justo sollicitudin. In hac habitasse platea dictumst. Curabitur nec erat ac elit feugiat imperdiet. Phasellus congue euismod congue. Morbi molestie ullamcorper mollis. Suspendisse potenti. Quisque commodo auctor molestie. Nam ut dui vel augue aliquam scelerisque quis nec elit.</span></a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a class="slideo" href="#nogo"><img class="thumb" src="filmstripv2/pic_38vtn.jpg" alt="" /><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#url"><img src="filmstripv2/pic_38v.jpg" alt="" /><span><b>Quisque</b> Non nunc neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean et sem lacus, gravida iaculis mauris. Proin diam enim, pellentesque ac rutrum eget, tincidunt iaculis mi. In in diam a arcu dapibus laoreet. Aliquam at sem mi, eu faucibus tellus. Mauris quam enim, semper quis aliquam id, venenatis vitae justo. Nam blandit, mauris in luctus suscipit, enim libero luctus nibh, in varius mauris lacus eget nibh. Maecenas lobortis lobortis metus et volutpat. In venenatis fringilla egestas. Suspendisse dignissim dapibus odio. Praesent faucibus blandit lacus, nec gravida nisi malesuada vitae.</span></a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a class="slidep" href="#nogo"><img class="thumb" src="filmstripv2/pic_39htn.jpg" alt="" /><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li class="landscape"><a href="#url"><img src="filmstripv2/pic_39h.jpg" alt="" /><span><b>Duis consequat</b> Odio id ornare scelerisque, turpis justo mattis nisl, at viverra nibh lectus id lorem. Proin purus augue, adipiscing sed bibendum eu, commodo quis mauris. Aliquam blandit auctor dictum. Curabitur vitae elementum metus. Aliquam fringilla dignissim diam, non interdum felis semper vel. Integer scelerisque vehicula elementum. Aliquam semper porttitor commodo. Cras quis enim eu nulla fermentum condimentum ac vel velit. Donec commodo, diam non consectetur cursus, erat arcu iaculis nibh, eu laoreet felis nibh a quam. In eget libero ligula. Donec venenatis mattis neque, id lacinia velit commodo at.</span></a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a class="slideq" href="#nogo"><img class="thumb" src="filmstripv2/pic_40htn.jpg" alt="" /><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li class="landscape"><a href="#url"><img src="filmstripv2/pic_40h.jpg" alt="" /><span><b>Suspendisse</b> Arcu sapien, egestas quis tempus sit amet, rutrum non libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eget lorem magna, sit amet scelerisque arcu. Nulla augue turpis, mattis quis congue eget, faucibus varius ante. Nunc bibendum, neque ac sodales tristique, dui justo malesuada justo, sit amet sollicitudin magna dui non felis. Maecenas purus quam, ultrices pellentesque luctus a, rhoncus id dolor. Maecenas velit enim, hendrerit eu accumsan eget, convallis vel dui. Aenean eu nulla ut enim aliquam dapibus ac cursus odio. In ullamcorper blandit quam, a vulputate nibh ullamcorper id.</span></a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a class="slider" href="#nogo"><img class="thumb" src="filmstripv2/pic_48vtn.jpg" alt="" /><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#url"><img src="filmstripv2/pic_48v.jpg" alt="" /><span><b>Nunc molestie</b> Dignissim vulputate. Proin dolor odio, lobortis ut laoreet vitae, viverra at diam. Aliquam eu magna dolor, et varius dolor. Vivamus ornare ultrices tellus, vel cursus nibh molestie id. Nullam congue odio ut nibh mattis vitae euismod massa porttitor. Nam sit amet elit eu leo ultricies tempus a eu nibh. Pellentesque mollis porta massa. Nulla gravida imperdiet sagittis. Pellentesque lacinia risus at lorem sagittis ut pulvinar neque euismod. Maecenas sit amet velit eget elit mattis aliquam.</span></a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a class="slides" href="#nogo"><img class="thumb" src="filmstripv2/pic_49vtn.jpg" alt="" /><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#url"><img src="filmstripv2/pic_49v.jpg" alt="" /><span><b>Nulla facilisi</b> Morbi in est sit amet odio imperdiet vulputate. Nulla facilisi. Donec convallis ligula eu orci suscipit feugiat. Suspendisse a tortor vitae felis vulputate vestibulum euismod vel magna. Nunc eu viverra magna. In bibendum laoreet lorem non sollicitudin. Suspendisse potenti. Etiam auctor, justo malesuada lobortis consectetur, velit urna mattis ligula, fringilla placerat eros felis non nisi. Pellentesque vitae mi laoreet libero imperdiet dapibus quis ac sem. In ut arcu id justo laoreet tempor at a tortor.</span></a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a class="slidet" href="#nogo"><img class="thumb" src="filmstripv2/pic_50htn.jpg" alt="" /><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li class="landscape"><a href="#url"><img src="filmstripv2/pic_50h.jpg" alt="" /><span><b>Integer</b> Quam turpis, semper et condimentum at, varius sed ante. Sed dolor urna, scelerisque eget dictum ac, lobortis ut leo. Phasellus nec euismod enim. Cras vel felis sit amet lectus sagittis rutrum. Suspendisse potenti. Nulla ipsum nisi, tincidunt at ultricies in, sodales ut diam. Vestibulum sed turpis diam, sed congue lacus. Aenean aliquet nisl vel quam aliquet sed semper risus commodo. Quisque ac justo leo. Proin eget urna sapien, a lobortis lorem. Donec magna orci, sagittis a dignissim quis.</span></a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
</div>

</div>