Question

I have a tr element with 3 td elements. The first and last td contain an image and the middle td contains text. The height of the middle td is effected by the height of the images in the first and third td. How do I code it so the middle td always has a fixed height smaller than the first and third. Or, another way of asking the question is, how do code it so the height of each td’s contents does not effect a sibling td? I’m trying to make a ribbon with a wrap around effect for an html email..

Setting a height on the middle td with CSS did not work.

 <table align="center" style="width:740px;" border="0" cellpadding="0" cellspacing="0">

    <tr>
          <td>
          <img style="border:none;" src="imageAlt2/sliceLeft.png" /></td>


      <td style=" background:#0082c8; color:#fff; padding:20px 50px;">"The amount of time it has saved us is pretty much immeasurable" </td>

            <td><img style="border:none;" src="imageAlt2/sliceRight.png" /></td>
    </tr>
  </table>

For the screen below you see the middle and third td. The middle td’s height is effected by the height of the image in the third td. Obviously, to get the 3D effect, the middle td needs to have a shorter height.

Answer 1

Using CSS to specify a height on the td’s only works if the height is larger then the height of the img (in other words, the td’s cannot be smaller then the img). this is just the way tables work.