WordPress.org

1. David Borrink
   Member
   Posted 2 years 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.

2. songdogtech
   Member
   Posted 2 years 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.

3. David Borrink
   Member
   Posted 2 years 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.

4. valuxes
   Member
   Posted 2 years ago #

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

5. David Borrink
   Member
   Posted 2 years 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.

   ?

6. David Borrink
   Member
   Posted 2 years 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?

7. songdogtech
   Member
   Posted 2 years 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?

8. David Borrink
   Member
   Posted 2 years 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.

9. David Borrink
   Member
   Posted 2 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?

10. David Borrink
    Member
    Posted 2 years 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 4x6 proportion images can be used. That's not really a downside because it looks better if both blocks have horizontal images.

Topic Closed

This topic has been closed to new replies.