Solved

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

Posted on 2008-06-12
4
218 Views
Last Modified: 2013-12-08
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
Comment
Question by:ctangent
  • 3
4 Comments
 
LVL 10

Accepted Solution

by:
bluefezteam earned 500 total points
Comment Utility
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
 
LVL 10

Expert Comment

by:bluefezteam
Comment Utility
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
 
LVL 4

Expert Comment

by:sajay_j
Comment Utility
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
 
LVL 10

Expert Comment

by:bluefezteam
Comment Utility
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

Featured Post

Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

Join & Write a Comment

Do you come here a lot? Are you lazy like me and don't want to go through the "trouble" of having to click your Dock's Safari icon and then having to click your Experts Exchange Favorites bookmark to get here? Well then this article is for you.
Today, still in the boom of Apple, PC's and products, nearly 50% of the computer users use Windows as graphical operating systems. If you are among those users who love windows, but are grappling to keep the system's hard drive optimized, then you s…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
How to create a custom search shortcut to site-search Experts Exchange using Google in the Firefox browser. This eliminates the need to type out site:experts-exchange.com whenever you want to search the site. Launch your Bookmark Menu: Press 'Ctrl +…

743 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now