rosemd
02-20-2007, 01:40 AM
Hi,
I come across this problem all the time and I have no idea what is wrong. In one column I have an image which is aligned to the very top of the cell. I have the valign = "top" code in the correct space. However, whenever I enter a long amount of text on the column next to it the image on the left pushes half way down the page.
Any ideas? Thanks.
I'm thinking I don't use use the div align code for positioning images to the top of a cell. I think it only works with text, am I right?
LeSabre
02-22-2007, 07:46 AM
Is your valign="top" in the table or the tr tag?
If you post your code I could take a look :)
rosemd
02-23-2007, 07:58 AM
The code below is for <a href="http://www.glamfxmakeup.com/example.htm">this page here</a>. I included the actual link so you could see what I mean. Thanks so much!
<HTML>
<HEAD>
<META NAME="Author" CONTENT="Rosemary">
<META NAME="Generator" CONTENT="Jasc Paint Shop Pro 7">
<TITLE>glamfxmakeup.com</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
A:link {text-decoration: underline; color: #721A8B}
A:visited {text-decoration: none; #FFEEFF}
A:hover {text-decoration: none; background: #FFEEFF; color: #721A8B}
</style>
</HEAD>
<BODY BGCOLOR="ffeeff" text="ffeeff" link="721a8b" vlink="ffeeff" alink="721a8b"" LEFTMARGIN="0" topmargin="0" RIGHTMARGIN="0" BOTTOMMARGIN="0" marginwidth="0" marginheight="0"0>
<TABLE ALIGN="CENTER" BORDER="0" CELLPADDING="0" CELLSPACING="0" WIDTH="676" HEIGHT="600">
<TR>
<TD ROWSPAN="2" COLSPAN="1" WIDTH="202" HEIGHT="78">
<IMG NAME="site0" SRC="http://smg.photobucket.com/albums/v97/rosiedee/art/site_1x1.jpg" WIDTH="202" HEIGHT="78" BORDER="0" VALIGN="TOP"></TD>
<TD ROWSPAN="1" COLSPAN="1" WIDTH="474" HEIGHT="8">
<IMG NAME="site1" SRC="http://smg.photobucket.com/albums/v97/rosiedee/art/site_1x2.jpg" WIDTH="474" HEIGHT="8" BORDER="0" VALIGN="TOP"></TD>
<TD WIDTH="1" HEIGHT="8">
<IMG NAME="blank" SRC="http://smg.photobucket.com/albums/v97/rosiedee/art/blank.gif" WIDTH="1" HEIGHT="8" BORDER="0" VALIGN="TOP"></TD>
</TR>
<TR>
<TD ROWSPAN="2" COLSPAN="1" WIDTH="474" HEIGHT="138">
<IMG NAME="site2" SRC="http://smg.photobucket.com/albums/v97/rosiedee/art/site_2x1.jpg" WIDTH="474" HEIGHT="138" BORDER="0" VALIGN="TOP"></TD>
<TD WIDTH="1" HEIGHT="70">
<IMG NAME="blank" SRC="http://smg.photobucket.com/albums/v97/rosiedee/art/blank.gif" WIDTH="1" HEIGHT="70" BORDER="0" VALIGN="TOP"></TD>
</TR>
<TR>
<TD ROWSPAN="2" COLSPAN="1" WIDTH="202" HEIGHT="336">
<IMG NAME="site3" SRC="http://smg.photobucket.com/albums/v97/rosiedee/art/site_3x1.jpg" WIDTH="202" HEIGHT="336" BORDER="0" VALIGN="TOP"></TD>
<TD WIDTH="1" HEIGHT="68">
<IMG NAME="blank" SRC="http://smg.photobucket.com/albums/v97/rosiedee/art/blank.gif" WIDTH="1" HEIGHT="68" BORDER="0" VALIGN="TOP"></TD>
</TR>
<TR>
<TD BGCOLOR="721A8B" ROWSPAN="2" COLSPAN="1" WIDTH="474" HEIGHT="454" BORDER="0" VALIGN="TOP"><p><font color="ffeeff">CONTENT
GOES HERE.</font></p>
<p><font color="ffeeff">When I type text in this area, the image next to
it (the one with the navigation links on the left pushes half way down
the page, even though i have the div align top thing in the code. </font></p>
<p><font color="ffeeff">Also, this box is not the same width as the top
of it. Can you see how it is poking out of the side on the left? Even
though, I have the exact widths set for it.</font></p>
<p><font color="ffeeff">I think I just need another pair of eyes (who also
knows what they are doing!) to see any mistakes I might've missed. I usually
don't run into trouble a lot with this stuff.</font></p>
<p><font color="ffeeff">Thank you sooo much for helping, I owe you heaps!</font></p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p> <p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p> <p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p> <p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p></TD>
<TD WIDTH="1" HEIGHT="268">
<IMG NAME="blank" SRC="http://smg.photobucket.com/albums/v97/rosiedee/art/blank.gif" WIDTH="1" HEIGHT="268" BORDER="0" VALIGN="TOP"></TD>
</TR>
<TR>
<TD BGCOLOR="ffeeff" ROWSPAN="1" COLSPAN="1" WIDTH="202" HEIGHT="186" BORDER="0" VALIGN="TOP"><div align="right"><font color="721a8b" size="1">site
design (c) rosemary dryley<br>
glamfxmakeup.com owned by <a href="mailto:alice@glamfxmakeup.com">alice
sheppard</a></font></div></TD>
<TD WIDTH="1" HEIGHT="186">
<IMG NAME="blank" SRC="http://smg.photobucket.com/albums/v97/rosiedee/art/blank.gif" WIDTH="1" HEIGHT="186" BORDER="0" VALIGN="TOP"></TD>
</TR>
</TABLE>
<!-- End Table -->
</BODY>
</HTML>
LeSabre
02-23-2007, 07:13 PM
Your welcome :) I just hope it helps you.
Try putting your VALIGN="TOP" in the <TD> tag instead of in your <IMG>, when I make that switch your image aligns to the top. Here are a couple of screenshots. Before the switch (http://i17.tinypic.com/2vj6geo.jpg), and After the switch (http://i17.tinypic.com/47kjygn.jpg).
And as far as the top pic not aligning w/the text box, your top image is as wide as you say but the purple strip does not extend the full width. See a screenshot here (http://i9.tinypic.com/405w0n5.jpg), the gray area is just the coloring around the whole pic to show you how that white piece sticks out. You could either make that purple strip wider or delete the white piece and shrink the text area... either way should work.
rosemd
02-25-2007, 05:22 AM
Oooh, thank you! I've had that problem with the image not aligning properly every time time I do a site (and i've been doing it for years!).