Using CSS to set slideshow properties

HTML & CSS
1

Hello there I’m in the process of designing my website (http://dl.dropbox.com/u/8847353/Jai_Sandhu_Design_Portfolio/index.html)

I’m using Jquery Cycle to create a slideshow of my images. I aim to get it to resize based on the size of the browser. I did this through CSS, assigning the !important tag to the % width and % height of images - overriding the fixed height and width being used in the javascript.

To give some context this issue has been discussed in an earlier post by another user facing the same problem
http://www.sitepoint.com/forums/showthread.php?743534-Help-setting-Width-of-Slides

The slideshow resizes but the transition is buggy, you get a flash of the next slide before each transition. I suspect I have to assign the overflow: hidden to the slideshow but I just cant seem to get it to work :confused: can anyone help?

-----The HTML-----


<!-- LEFT NAV -->
<div id="leftnav">
		<div class="slideshow">
			<img src="work/japan_11.03/hope_for_japan_1.jpg" class="a" alt="Japan 11/03: Title page" />
			<img src="work/japan_11.03/hope_for_japan_2.jpg" class="a" alt="Japan 11/03: Land of the rising sun" />
			<img src="work/japan_11.03/hope_for_japan_3.jpg" class="a" alt="Japan 11/03: Fishing for inspiration" />
			<img src="work/japan_11.03/hope_for_japan_4.jpg" class="a" alt="Japan 11/03: A little place called home" />
			<img src="work/japan_11.03/hope_for_japan_5.jpg" class="a" alt="Japan 11/03: Shinkasen" />
			<img src="work/japan_11.03/hope_for_japan_6.jpg" class="a" alt="Japan 11/03: Getting back into the swing of things" />
			<img src="work/japan_11.03/hope_for_japan_7.jpg" class="a" alt="Japan 11/03: Remembered and not forgotten" />
	</div>
</div>

-----The Javascript-----

$(document).ready(function() {
$('.slideshow')
.after('<div id="nav">')
.cycle({
	fx: 'fade',
	sync: true,		
        speedIn:  500,  
	speedOut:  500,  
	timeout: 10000,
	pager:  '#nav',
	next:   '.slideshow',
	slideResize: false,
	});
});

-----The CSS-----


img.a {	
	min-width: 475.2px;
	max-width: 1342px;
	height: 92.58%;
	
}

.slideshow { 
        width: 92.58% !important ; 
        margin-left:7%; 
        overflow: hidden;  
}

.slideshow img { 
        height: auto !important ; 
        width: 92.58% !important; 
        position: relative !important; 
        padding: 0px; 
        background-color: #fcfcfc; 
}


.pics {  
        padding: 0;  
        margin:  0;
} 

.pics img {  
        padding: 0px;   
        background-color: #fcfcfc;  
        top:  0; 
        left: 0;
}