www.westernwebdesign.com.au/test/flora3.html

I have an image gallery with thumbnails and use js to enable them to open a larger version in a box on the same page.

The problem is that some thumbnails - like the one shown - enlarge and distort themselves instead of staying the size they actually are. This only seems to happen with thumbnails that are taller than they are wide. I have no idea why this is happening - there should be plenty of room for them. I make them a max of 80px high

Is there anything in the CSS that is causing this?

Thanks

Lyn

<ul id="img">
<li><div><a href="caesia.jpg" onclick="return Genie(this.href,400,533);"><img alt="Caesia micrantha" src="caesiath.jpg" />
               </a></div><p><em>Caesia micrantha</em> - Pale Grass Lily</p>
</ul>

ul#img {
   list-style:none;
   font-size: .76em;
   margin:0 0 0 2em;
   padding:0;
   float: left;
   width: 90%;
   }
ul#img li {
   width: 105px;
   height: 160px;
   float: left;
   margin: 0 0.5em 0.5em 0;
   background-color:#dba;
   }
ul#img li div {
   height: 90px;
   position:relative;
   background-color:#dba;
   }
ul#img li img {
   display:block;
   position:absolute;
   bottom:0;
width: 100px; } ul#img li p {
   margin: .25em;
   color: #000;
   }
ul#img li p span {
   font-weight:bold;
   display:block;
   margin-top:1em;
} ul#img:after {
 display:block;
 content: " ";
 clear:left;
 height:0;
}



*******************************************************************
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
*******************************************************************

Reply via email to