PDA

Click to See Complete Forum and Search --> : Alignment Problem in Table <TD>

ruchir123
03-22-2009, 08:27 PM
Hello,

I have bellow mentioned code snippet. The last link named "Website" needs to be positioned at the right side of TD. However, no matter what I do, it is positions/aligns to the left. I have tried various ways including hardcoding "align:right" as well as through css classes but no luck.

<TABLE id= "menu" border>
<TR> <TD align="left" WIDTH=200>Primary Phone:(111)123-1234</TD>
<TD align="right" WIDTH=200>Secondary Phone:(111)123-1235</TD>
</TR>
<TR> <TD align="left" ><ul><li><a href="mailto:webmaster@coexsys.com?subject=YourMurrieta.com">Email</a></li></ul></TD>
<TD align="right">Fax:(111)123-1234</TD>
</TR>
<TR>
<TD class="tdr"><ul><li><a href="http://www.xyz.com">From Google™ Earth</a></li><ul></TD>
<TD class="tdl"><ul><li><a href="http://www.coexsys.com">Website</a></li><ul></TD>
</TR>
</TABLE>

---------
CSS classes

.tdl {align:left}
.tdr {align:right}

Please help.

Thanks,Ruchir
Cathryn
03-22-2009, 10:09 PM
You have the "tdl" class assigned to the "Website" cell.

I didn't test your CSS but using align="right" fixes the problem. I imagine changing the tdl to tdr would also work.
ruchir123
03-22-2009, 11:18 PM
Good Catch! However I have changed to tdr and still problem persists!!
:(
Cathryn
03-22-2009, 11:55 PM
Try changing your CSS to text-align:right
ruchir123
03-23-2009, 11:50 PM
I am sorry to say this but still no luck :(
Cathryn
03-24-2009, 02:42 AM
Its got to be somewhere outside of that code or the way in which you have assigned the CSS. I copied your code to a test page like this:

<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
<TABLE id= "menu" border>
<TR> <TD align="left" WIDTH=200>Primary Phone111)123-1234</TD>
<TD align="right" WIDTH=200>Secondary Phone111)123-1235</TD>
</TR>
<TR> <TD align="left" ><ul><li><a href="mailto:webmaster@coexsys.com?subject=YourMurrieta.com">Email</a></li></ul></TD>
<TD align="right">Fax111)123-1234</TD>
</TR>
<TR>
<TD class="tdl"><ul><li><a href="http://www.xyz.com">From Google™ Earth</a></li><ul></TD>
<TD class="tdr"><ul><li><a href="http://www.coexsys.com">Website</a></li><ul></TD>
</TR>
</TABLE>
</body>
</html>

and made a test.css file with this (because this is the only way I use CSS, I don't feel reliable trusting another way for testing):


td

.tdl {
text-align:left;
}

.tdr {
text-align:right;
}

And it works fine.

It also works fine without the CSS and using align="right"
ruchir123
03-26-2009, 11:18 PM
Apologies for delay in response Cathryn. You are right. It was this css class that was conflicting with that link. If I remove these (shown below) classes then it is aligned at right.

But, but! I have to have these classes. How can I still have this classes and yet display link with aligh right?

#menu ul {margin:0; padding:0;}
#menu ul li {float:left;padding:0pt;display:inline; list-style:none;}
#menu ul a {display:block; font-size:12px; text-decoration:none; color:Red;}
#menu ul a:hover {padding:0pt;background-color:#F7F2EE;}

Thanks,
Ruchir
minicraig
04-09-2009, 12:38 AM
if you still haven't figured it out..

i know its clumsy but i had a similar problem and this worked

change <td to <td style="float:right" each time its needed to be right
eg.<TR> <TD style="float:right" WIDTH=200>Primary Phone111)123-1234</TD>

if this doesnt work then there are many similar things you can do building the css right into each td, tr or table as needed. By having it this close to the source in a way it means it overrides for that td
minicraig
04-09-2009, 12:43 AM
If all else fails...
edit:

change <td to <td style="float:right; text-align:right;"