Stretched images in *some* tables in IE

  • Resolved David Borrink

    (@davidborrink)


    14 years, 1 month ago

    Working on a site with a custom front page. It has a table setup to allow three posts to be featured. Top feature spans three columns and looks fine. Bottom two features are in single columns with a “spacer” column in between.

    It’s at this link.

    Note the bottom feature images are stretched in IE. The top is fine.

    Here’s the image css used:

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

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

    (The negative margin-top settings are so that the image is to the left of the title and text)

    My height:auto settings don’t seem to work in IE, but they’re fine in Firefox. Any ideas why this might be happening?

    In the table cells I have this code:
    (TOP)
    <td valign="top" colspan="3">

    (BOTTOM CELLS – each has this)
    <td width="300px" valign="top">

    Thanks for your time, folks.

Viewing 9 replies - 1 through 9 (of 9 total)
  • Mark Ratledge

    (@songdogtech)

    14 years, 1 month ago

    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.

    Thread Starter David Borrink

    (@davidborrink)

    14 years, 1 month ago

    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.

    valuxes

    (@valuxes)

    14 years, 1 month ago

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

    Thread Starter David Borrink

    (@davidborrink)

    14 years, 1 month ago

    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.

    ?

    Thread Starter David Borrink

    (@davidborrink)

    14 years, 1 month ago

    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?

    Mark Ratledge

    (@songdogtech)

    14 years, 1 month ago

    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?

    Thread Starter David Borrink

    (@davidborrink)

    14 years, 1 month ago

    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.

    Thread Starter David Borrink

    (@davidborrink)

    14 years ago

    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?

    Thread Starter David Borrink

    (@davidborrink)

    13 years, 12 months ago

    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.

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Stretched images in *some* tables in IE’ is closed to new replies.