Well, I'm making menus, and I have a small gif image that is an arrow pointing right. I want to add this to any menu item that has a sub-menu. The problem is, the text needs to be aligned left, and the arrow aligned right. I thought I could just put the arrow in a span tag with style="text-align:right;" but it didn't work. I tried adding the same style to the img tag, also to no avail. The page is <!-- m --><a class="postlink" href="http://campbells.dikaios.net">http://campbells.dikaios.net</a><!-- m --> but the arrows aren't on there yet, because they look funny. The menu for forums has two menu items. Both have sub-menus. That's the ones I am talking about.<!--content-->I am pretty sure you can't use span for alingment unless you change its display properties to block, which makes little sense.<br />
<br />
Try something like this:<br />
<br />
<td width="n" align="left"><br />
<img src=http://www.htmlforums.com/archive/index.php/"arrow.gif" align="right"><br />
your text goes here<br />
</td><br />
<br />
<br />
"n" needs to be whatever width the cell is, be it fixed or percentage, that way the image can slide over to the far right side of the cell. If you do not define a width the image may only be to the right of the text but not all the way to the right of the cell. Of course align="left" in the table cell is not really necesssary since that is the default condition, I just put it there to hopefully make things clear.<!--content-->Well, I tried that, and 2 problems.<br />
<br />
1. Isn't the align tag going away in favor of css? If so, why does the css not work?<br />
<br />
2. It snaps it to the top of the cell, no matter what I do to try to vertically align it. I suppose I could re-make the image, but it's more annoying than anything right now.<!--content-->i would put both the text and image in their own divs and then float to opposite sides<br />
<br />
style="float:right;"<!--content-->I tried that leoo, it didn't work right. It extended the menu to like 300+ pixels even though the containing div & the table are both set to style="width:110px" Also, it still snaps to the TOP of the cell, and verticle-align:middle; does not help<!--content-->looks like you got it, or is that IE giving me it incorrect
<!--content-->Yeah, I got it "working" but I'm not really satisfied. I ended up taking my 4x8 image, and making it a 4x12 image, with 2 rows of transparent pixels on the top and bottom. Then I used the first solution, where you put the image before your text, and tell it to align right. I really hate to use the align="right" thing, since I've been trying to use CSS. I just can't get it to work with CSS. I tried using divs, and positioning it relatively, which *almost* worked, but it made the line height for the table cell taller, even though the line height it currently 12, and the image was only 8px high. I even made the div containing it 8px high, and it still made the cell too tall. I can position it absolutely, BUT then anytime I want to add or remove items to that list, I have to re-figure each value. BUT, at least it works for now. If anyone comes up with another way, let me know. Also, thanks to kevin for the solution 
<!--content-->don't forget that any div you use has a padding around it. you have to make them zero then it should only be as big as the biggest thing in the container.<br />
<br />
div's are block level elemetns and any block level element has a padding/margin.<!--content-->
<br />
Try something like this:<br />
<br />
<td width="n" align="left"><br />
<img src=http://www.htmlforums.com/archive/index.php/"arrow.gif" align="right"><br />
your text goes here<br />
</td><br />
<br />
<br />
"n" needs to be whatever width the cell is, be it fixed or percentage, that way the image can slide over to the far right side of the cell. If you do not define a width the image may only be to the right of the text but not all the way to the right of the cell. Of course align="left" in the table cell is not really necesssary since that is the default condition, I just put it there to hopefully make things clear.<!--content-->Well, I tried that, and 2 problems.<br />
<br />
1. Isn't the align tag going away in favor of css? If so, why does the css not work?<br />
<br />
2. It snaps it to the top of the cell, no matter what I do to try to vertically align it. I suppose I could re-make the image, but it's more annoying than anything right now.<!--content-->i would put both the text and image in their own divs and then float to opposite sides<br />
<br />
style="float:right;"<!--content-->I tried that leoo, it didn't work right. It extended the menu to like 300+ pixels even though the containing div & the table are both set to style="width:110px" Also, it still snaps to the TOP of the cell, and verticle-align:middle; does not help<!--content-->looks like you got it, or is that IE giving me it incorrect
<!--content-->Yeah, I got it "working" but I'm not really satisfied. I ended up taking my 4x8 image, and making it a 4x12 image, with 2 rows of transparent pixels on the top and bottom. Then I used the first solution, where you put the image before your text, and tell it to align right. I really hate to use the align="right" thing, since I've been trying to use CSS. I just can't get it to work with CSS. I tried using divs, and positioning it relatively, which *almost* worked, but it made the line height for the table cell taller, even though the line height it currently 12, and the image was only 8px high. I even made the div containing it 8px high, and it still made the cell too tall. I can position it absolutely, BUT then anytime I want to add or remove items to that list, I have to re-figure each value. BUT, at least it works for now. If anyone comes up with another way, let me know. Also, thanks to kevin for the solution <!--content-->don't forget that any div you use has a padding around it. you have to make them zero then it should only be as big as the biggest thing in the container.<br /><br />
div's are block level elemetns and any block level element has a padding/margin.<!--content-->