table: valign-top problem

maya

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

Jonathan N. Little

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

Ben C

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

Beauregard T. Shagnasty

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

Bergamot

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

Ben C

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

maya

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