467,163 Members | 986 Online
Bytes | Developer Community
Ask Question

Home New Posts Topics Members FAQ

Post your question to a community of 467,163 developers. It's quick & easy.

table: valign-top problem


I have an image and right next to the image I have some text, all w/in
the same <td>.. but, even though I have valign="top" for the <td>, the
text does not appear on top of the <td>, it appears flush with the
BOTTOM of the image..

pls see http://www.mayacove.com/misc/table/table.html

not sure how to solve this, "text-align:top" does not exist in css....;)

thank you..

Feb 15 '08 #1
  • viewed: 27742
Share:
7 Replies
maya wrote:
>
I have an image and right next to the image I have some text, all w/in
the same <td>.. but, even though I have valign="top" for the <td>, the
text does not appear on top of the <td>, it appears flush with the
BOTTOM of the image..

pls see http://www.mayacove.com/misc/table/table.html

not sure how to solve this, "text-align:top" does not exist in css....;)
True because the property is called "vertical-align"

td { vertical-align: top; }
or
td { vertical-align: text-top; }

http://www.w3.org/TR/CSS21/visudet.h...vertical-align

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
Feb 15 '08 #2
rf

"maya" <ma********@yahoo.comwrote in message news:fp**********@aioe.org...
>
I have an image and right next to the image I have some text, all w/in the
same <td>.. but, even though I have valign="top" for the <td>, the text
does not appear on top of the <td>, it appears flush with the BOTTOM of
the image..

pls see http://www.mayacove.com/misc/table/table.html
float: left; the image.

--
Richard.
Feb 15 '08 #3
On 2008-02-15, maya <ma********@yahoo.comwrote:
Jonathan N. Little wrote:
>maya wrote:
>>>
I have an image and right next to the image I have some text, all w/in
the same <td>.. but, even though I have valign="top" for the <td>, the
text does not appear on top of the <td>, it appears flush with the
BOTTOM of the image..

pls see http://www.mayacove.com/misc/table/table.html

not sure how to solve this, "text-align:top" does not exist in css....;)

True because the property is called "vertical-align"

td { vertical-align: top; }
or
td { vertical-align: text-top; }

http://www.w3.org/TR/CSS21/visudet.h...vertical-align

thank you very much.. unfortunately neither one of these worked..
http://www.mayacove.com/misc/table/table.html

the only way text is where I want it is by eliminating the image.. (I
guess I need to do separate <tdfor img and text, but I was trying to
avoid that..)
You can set vertical-align: top on the <ato bring it to the top of its
line-box (whose height in this case corresponds to that of the <img>).

.alignTop a { vertical-align: top }

Or just float the image as rf suggested.
Feb 15 '08 #4
Ben C wrote:
Or just float the image as rf suggested.
Did my post not make it to Usenet?

--
-bts
-Friends don't let friends drive Vista
Feb 15 '08 #5
maya wrote:
I have an image and right next to the image I have some text, all w/in
the same <td>.. but, even though I have valign="top" for the <td>, the
text does not appear on top of the <td>, it appears flush with the
BOTTOM of the image..
<imgis aligned at baseline by default. The line-height automatically
stretches to the height of the image so the text baseline and bottom of
the image are aligned. Changing the vertical alignment on the td won't
change this.
pls see http://www.mayacove.com/misc/table/table.html

not sure how to solve this, "text-align:top" does not exist in css....;)
http://www.w3.org/TR/CSS21/visudet.h...vertical-align

img {vertical-align:top} or
img {vertical-align:text-top}

That will align the top of the image with the top of the text. Keep in
mind that includes space for capital letters and ascenders.

--
Berg
Feb 15 '08 #6
On 2008-02-15, Beauregard T. Shagnasty <a.*********@example.invalidwrote:
Ben C wrote:
>Or just float the image as rf suggested.

Did my post not make it to Usenet?
Sorry yes you did suggest float as well. My main point was
vertical-align on the <awhich I didn't think anyone else had
said.
Feb 16 '08 #7
Bergamot wrote:
maya wrote:
>I have an image and right next to the image I have some text, all w/in
the same <td>.. but, even though I have valign="top" for the <td>, the
text does not appear on top of the <td>, it appears flush with the
BOTTOM of the image..

<imgis aligned at baseline by default. The line-height automatically
stretches to the height of the image so the text baseline and bottom of
the image are aligned. Changing the vertical alignment on the td won't
change this.
>pls see http://www.mayacove.com/misc/table/table.html

not sure how to solve this, "text-align:top" does not exist in css....;)

http://www.w3.org/TR/CSS21/visudet.h...vertical-align

img {vertical-align:top} or
img {vertical-align:text-top}

That will align the top of the image with the top of the text. Keep in
mind that includes space for capital letters and ascenders.
that did it! thank you very much....
Feb 19 '08 #8

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

3 posts views Thread by Bjoern Wolfgardt | last post: by
4 posts views Thread by Daniel | last post: by
1 post views Thread by Don Grover | last post: by
2 posts views Thread by Raed Sawalha | last post: by
7 posts views Thread by Jef Driesen | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.