jQuery image resizing

I’m working on a site with several templates - one col, two col and 3 col. So that any images people use don’t break the design, I want to limit the width of an image to that of its container column. Unfortunately the company’s default browser is IE6 so I can’t use max-width (or rather I do but IE6 ignores it). So I tried to write a jQuery function that would detect whether an image was too big for its column and change its width accordingly. It works but I’ve just discovered that it doesn’t ignore images smaller than the maximum width - it resizes them to the maximum!

The code is called on document ready and goes like this:

		if($('.threeColRight').length >0) {
		// THREE COL LAYOUT	
		checkWidths('.threeColRight','165px')
		checkWidths('.threeColMid','355px')
		checkWidths('.threeColLeft','178px')
		}
		
		else if($('#mainContent')) {
		// TWO COL LAYOUT
		checkWidths('#mainContent','418px')
		checkWidths('#secondaryContent','250px')
			}

function checkWidths(holder,maxwide) {
	var theHolder= holder + " img"
	var wide= $(theHolder).css('width') 
	if(wide > maxwide) {
			$(theHolder).css('width',maxwide)
	}



When I put in an alert to show the value of ‘wide’ for the images that it’s enlarging, it says ‘auto’. Sure enough I’d put the images in without specifying a width. However I’ve tried adding ‘width=’ and style=width… to the image tags and it still comes up as ‘auto’.

Finally I should mention I only have the resizing problem in IE, but in all versions, not just 6.

Can anyone tell me what I’ve done wrong, or suggest a better way to achieve the same result? I’m new to JQuery.

I tried to amend it so that it will only resize if there isn’t an explicit width set. But now it just does return false with every image.

function checkWidths(holder,maxwide) {
	var theHolder= holder + " img"
	if( $(theHolder).attr('width')) { alert('has width');return false;}
	else {
		alert('working')
		var wide= $(theHolder).css('width') 
		if( wide > maxwide ) {
				$(theHolder).css('width',maxwide)
		}
	}
}

So on a sample page it doesn’t distinguish between these two images:
<img src=“images/titles/prof_quals_img.jpg” alt=“Professional Qualifications” />
<img src=“images/who_you_know_button.jpg” width=“20” alt=“” />

The first image is too big I want the code to resize it to ‘maxwide’. The second image is OK, in that it displays at the width of 20. I’d prefer to be able to use images with a smaller width than maxwide without explicitly declaring a width but I can live with that if I have to.