Stretched images in *some* tables in IE

You have some errors in your table code, among others: [Invalid]Markup Validation of parkwayfederal.com – W3C Markup Validator. Scroll down in the validation report to see line numbers and source code.

songdogetech,

Thanks for the validation check. I obviously had some stray end div tags in my front page code. After fixing and double-checking the structure, plus fixing a duplicate div id issue, I now have css coding for the images of the upper and lower features as such:

#topfeature img {
	margin-top: -37px;
	max-width: 300px;
	height: auto;
	}	

#lowerfeatureleft img, #lowerfeatureright img {
	margin-top: -47px;
	max-width: 150px;
	height: auto;
	}

But, I’m still getting stretched images in IE.

Try this fix: https://sapsiwye.com/table-behaving-badly/ i.e. just remove the height specification.

I tried that, and still had stretched images on the bottom row.

Just for fun, I put fixed amounts of 75px, and 100px in the height, and they displayed as 75 and 100. Set it back to “auto” and it stretches.

And still this doesn’t happen in the top row.

?

You know, maybe this matters: in between my two lower feature blocks is a blank table cell with this code:

<td width="40px">
</td>

Would a blank cell interfere with the height attributes of two adjacent cells?

It’s IE; anything is possible. Put a 1 pixel gif there sized to the other images and see what happens. Better yet, why not locate your images with CSS instead of tables?

I’ll try your 1 pixel gif idea first.

And if that doesn’t work, maybe I’ll do the CSS method. Obviously multiple floating divs is needed to do the two lower feature blocks while having the sidebar to the right.

Okay, I’m still not having success. I’ve taken all three of the feature items and have them in three floating divs instead of a table structure with columns for spacing. A much cleaner template, yes.

But… the two lower photos are still stretching vertically.

And it’s fine in Firefox, of course.

Does anyone know of a IE trick to force pix to be “auto” in height?

I found a solution after digging around on several Google searches, for anyone else who runs into this problem.

My solution uses the max-height callups.

So now my css for the lower blocks says:

#lowerfeatureleft img, #lowerfeatureright img {
	margin-top: -47px;
	max-width: 150px;
	max-height: 100px;
	height: auto !important;
	height: 100px;
	}

The upside is that the pictures now look normal in IE. The downside is that only horizontal images can be used since the max-width is 150. Only 4×6 proportion images can be used. That’s not really a downside because it looks better if both blocks have horizontal images.