Viewing only bottom of an image

Images in tables or divs restricted to viewing bottom of image only

[Shunter]

I can insert an image tag within a table (embedded within a div) and restrict the height so as to only see the top of the image. I'd like to be able to restrict the height of a row and only display the bottom portion of an image for example I use this to view the top of an image which has a height of 100px:

<tr>
<td valign="top">
<div style="position:relative;height:50px;overflow:hidden;">
<img src="common/img/page/img_footer.gif" align="top" style="position:relative;"/>
</div>
</td>
</tr>

I've tried aligning to bottom but I still see the top of the image. Your help is appreciated.

Thanks Simon...

[bubblebug]

Make the image a background of the div.

ie.
div#maskBlock
{
width:120px;
height:40px;
background: url(images/namedateend.gif) no-repeat left bottom;
}

<div id="maskBlock"></div>

Hope this is what you meant.

[Shunter]

Hi - sorry I should have mentioned, this code will be used to email an html confirmation page to users. I'm having problems with web clients (Hotmail, GMail etc). I've removed all background images, linked CSS and embedded CSS as these were all being stripped or re-written by web client. I can only really use image tags. :o(

[bubblebug]

You could try:

div#maskBlock
{
width: 100px;
height: 50px;
overflow: hidden;
}
img#maskImage
{
margin-top: -50px;
height: 100px;
width: 100px;
}

<div id="maskBlock"><img src="image.gif" id="maskImage"/></div>

[bubblebug]

Sorry maybe:

<div style="width:100px;height:50px;overflow:hidden;"><img src="image.gif" style="margin-top:-50px;height:100px;width:100px;" /></div>

[Shunter]

Thanks, that worked perfectly...

Why can't all web email clients just handle HTML emails the same (that was out of frustration - not realy a question)

Thanks again

[Shunter]

Ahhhhh sorry, forgot that Hotmail strips out margins from style tags.

[bubblebug]

Then I will suggest:

Chopping the graphic in half to just the part you need.

Not very fancy but probably the most practical of all suggestions.

[SuzyUK]

does position:absolute; work?

<td valign="top">
<div style="position:relative;height:25px;overflow:hidden;">
<img src="http://showcase.netins.net/web/phdss/WebmasterWorldgfx/dlogo.png" style="position:absolute; bottom: 0; left: 0;"/>
</div>
</td>
</tr>

if it does,

bottom: 0;

should show bottom half

top: 0;

should show top half

Suzy

[Shunter]

Hi,

Hotmail just removes absolute positioning... looks like its a case of chopping up the image.

thanks anyway.