How's hyperlink overlap a image and located at bottom right corner of table cell.

[webster5u]

Hi, I'm encounter a problem here. I hope somebody able helping me.
i'm put a "log out" hyperlink overlap a image and that particular image is inside a table cell. I also try align the hyperlink on bottom and right at the cell but the problem is occur.

If i set position as absolute then the image and hyperlink will leak out from table. If without the position setting then hyperlink is not overlap the image. Any suggestion?

This is my HTML code

<TABLE cellSpacing="0" cellPadding="0" width=100% border="1">
    <TBODY>
    <tr height="31">
        <TD width="153"><IMG src="files/a1.gif" height="31" style="display:block;"></TD>
        <TD width="309"><IMG src="files/a2.gif" height="31" style="display:block;"></TD>
        <TD width="146"><IMG src="files/a3.gif" height="31" style="display:block;"></TD>
        <TD><IMG src="files/a4.gif" width=100% height="31" style="display:block;"></TD>
        <TD width="110"><IMG src="files/a4.gif" height="31" style="display:block;"></TD>
    </tr>
    <tr>
        <TD><IMG src="files/b1.gif" style="display:block;"></TD>
        <TD><IMG src="files/b2.gif" style="display:block;"></TD>
        <TD><IMG src="files/b3.gif" style="display:block;"></TD>
        <TD><IMG src="files/b4.gif" width=100% height="48" style="display:block;"></TD>
        <TD style="text-align: right; vertical-align: bottom;">
        <a href="" style="display:block; position: absolute; z-index:2;">Log Out</a>
        <IMG src="files/b5.gif" style="display:block;">
        </TD>
    </tr>
    </TBODY>
</TABLE>
 

[prabirchoudhury]

try this block with logout link and image .. put both in a <div>

 
<div style="background: url(files/b4.gif) no-repeat; float: right;">
            <a href="" style="display:block; ">Log Out</a>
           </div>
 

[omerbutt]

@webster5u
hi webster
try using this

<TABLE cellSpacing="0" cellPadding="0" width=100% border="1">
     <TBODY>
     <tr height="31">
         <TD width="153"><IMG src="files/a1.gif" height="31" style="display:block;"></TD>
         <TD width="309"><IMG src="files/a2.gif" height="31" style="display:block;"></TD>
         <TD width="146"><IMG src="files/a3.gif" height="31" style="display:block;"></TD>
         <TD><IMG src="files/a4.gif" width=100% height="31" style="display:block;"></TD>
         <TD width="110"><IMG src="files/a4.gif" height="31" style="display:block;"></TD>
     </tr>
     <tr>
         <TD><IMG src="files/b1.gif" style="display:block;"></TD>
         <TD><IMG src="files/b2.gif" style="display:block;"></TD>
         <TD><IMG src="files/b3.gif" style="display:block;"></TD>
         <TD><IMG src="files/b4.gif" width=100% height="48" style="display:block;"></TD>
         <TD align="center" valign="middle" style="background-image:url(../ajaxpaging/loading.gif); background-repeat:no-repeat; background-position:center;">
         <a href="filename.php">Log Out</a>
         </TD>
     </tr>
     </TBODY>
 </TABLE>
 

[prabirchoudhury]

still that not gonna work .. did you test this script ? but it is not working for me in any browser.

[omerbutt]

@prabirchoudhury
its working in all browasers IE and Mozilla specially

[webster5u]

Sorry for late reply. I'm busy for the other code yesterday.

Thank for your sharing, I get your idea.
Both of your trying change the background image instead image tag. The script apply in TABLE TD is fine but if it apply in DIV then it bring along idle space between TD and DIV.

            <TD style="background: url(WEB_CONTEXT/images/b5.gif) no-repeat center; 
                text-align:center; vertical-align: bottom;">
                  <a href="/webdev/mis/auth/logout.jsp">Log Out</a>
            </TD>
 

[omerbutt]

@webster5u
sory if i am not getting you but are you trying to replace a td with a div , you have to place the div inside the td , if i am wrong please do explain a lil bit between which td and div there is alot of space
reagrds,
omer aslam

[webster5u]

I change TD background image instead of DIV. It is work fine now.

If it is put background image in DIV tag then background image will only covers the DIV tag and TD is show in white. As below illustrate

<TD>
wwwwwwwwwwwwwwwwww
wwwwwwwwwwwwwwwwww
wwwwwww<DIV>bbb</DIV>
wwwwwwwwwwwwwwwwww
</TD>

p/s: w is white and b is blue from image.

[omerbutt]

hi
look here and which doc type are you using and try assigning same width to both TD nad Div
link