Can a css guru help me!

[deansaddigh]

On this page http://www.languageschoolsuk.com/school_details.php?id=83

i am using a script called pikachoose.

all i want to do is make the main picture the same dimensions no matter what

 

can anyone help.

 

heres where i implement it on the page

 

// Open the div for the images				
			echo '<div class="pikachoose" style="float: right;">';
			echo '<div class="pikamain">';
			echo '<ul id="pikame">';
			// Image loop
			while($copiedrow = mysql_fetch_array($copiedresult))
			{
				$imagename = $copiedrow ['image_name'];
				$image = 'Admin/'.$copiedrow['path'] . '/' . $copiedrow ['image_name'];

                    echo '<li><img class="pika_main_img" src="'.$image.'"/ ><span>'.$imagename.'</span></li>';

			}
			// Close div
			echo '</ul>';
			echo '</div>';
			echo '</div>';

 

 

And heres the css

 

/* pikachoose  { */

.pikachoose {

margin: 0 auto 50px 1em;

padding: 5px;

width: 300px;

background: #eee;

border: 1px #ddd solid;



}



.pikachoose ul {

padding: 5px;

width: 310px;

margin: 0;

overflow: hidden;



}



.pikachoose ul li {

float: left;

border: 1px solid #eee;

background: #ccc;

margin: 0 6px 4px 0;

position: relative;

overflow: hidden;

}



.pikachoose ul li div img {

position: relative;

cursor: pointer;



}



.pika_main {

width: 301px;

height: 196px;

display: block;

position: relative;

}



.pika_main_img {

position: absolute;

top: 2px;

left: 2px;

}



.pika_back_img {

position: relative;

top: 0px;

}



.pika_subdiv {

position: relative;

border: 1px solid #aaa;

background: #eee;

padding: 2px;

}



.pika_subdiv img, .pika_subdiv a img{

border:none;

  width:295px;
  


}


.pika_caption{

width: 295px;

height: 16px;

padding-top: 1px;

text-align: center;

position: absolute;

bottom: 13px;

left: 3px;

color: white;

background: url('includes/PikaChoose_3.0/black.png') top left;

}





.pika_caption a{color:white;}

.pika_play{position:absolute;z-index:1;left:50%;margin-left:-25px;width:50px;top:5px;}
.pika_play a{position:relative;margin-left:auto;cursor:pointer;display: block;width:50px;height:50px;background:url('includes/PikaChoose_3.0/play.png') top center no-repeat;}
.pika_play a{position:relative;margin-left:auto;cursor:pointer;display: block;width:50px;height:50px;background:url('includes/PikaChoose_3.0/pause.png') top center no-repeat;}

.pika_navigation a{font-size: 12px; text-decoration: none;}
.pika_navigation a:hover{text-decoration: underline;}
.pika_navigation{padding-top:10px;clear:both;text-align:center;}

/* if you want to 'hide' these jus make their height and width 1px */
.pika_prev_hover{position:absolute;top:5px;left:5px;height:456px;width:100px;background:url('includes/PikaChoose_3.0/rewind.png') top left no-repeat;}
.pika_next_hover{position:absolute;top:5px;right:5px;height:456px;width:100px;background:url('includes/PikaChoose_3.0/fastf.png') top right no-repeat;}

 

I want it to look exactly like this http://pikachoose.com/demo/

 

I would greatly appreciate the help