• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 265
  • Last Modified:

How do I fix bottom alignment of an image in a table cell in IE?

I have an image in a table cell I want to align to the very bottom. But in IE 7, there is a single line of the background color that appears underneath the image - it is 1 pixel away. I've set margin-bottom, padding-bottom on image and vertical-align:bottom on cell but still doesn't work .Cell padding/spacing is 0 on table.
0
ctangent
Asked:
ctangent
  • 3
1 Solution
 
bluefezteamCommented:
sounds like there may be whitespace in your code, make sure in the HTML code where your image is, theres no line break or space between the tablecell
Like this
<td><img src="image.jpg" /></td>


as this...
<td><img src="image.jpg" /> </td>
or
<td>
<img src="image.jpg" />
</td>

can produce gaps in IE.
0
 
bluefezteamCommented:
just make sure all the code is flush to each other, no spaces where one tag ends and another meets.

you could also set on the table cell in question the following css and html to make the image gravitate to the end of that cell

<td class="test"></td>

.test {
position:relative;
height:100px; //set to what you need
}

.test img{
position:absolute;
bottom:0;
}
0
 
sajay_jCommented:
This seems to have a spacing [ &nbsp; ] in your code. or your have a <p> tag or <h1> tag with that images. Please remove any paragraph or header tag around image tag.

your html should look like below;
<table>
<tr>
<td>
<img src="" /> // There should be no other tags around this line....
</td>
</tr>
</table>

Open in new window

0
 
bluefezteamCommented:
actually, I wouldn't have any space around the image tag, even a new line as shown in sajay_j example can create gaps. Try the first method I've shown - good luck
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Introducing Cloud Class® training courses

Tech changes fast. You can learn faster. That’s why we’re bringing professional training courses to Experts Exchange. With a subscription, you can access all the Cloud Class® courses to expand your education, prep for certifications, and get top-notch instructions.

  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now