By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
437,676 Members | 1,759 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 437,676 IT Pros & Developers. It's quick & easy.

table: valign-top problem

P: n/a

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
Share this Question
Share on Google+
7 Replies


P: n/a
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

P: n/a
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

P: n/a
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

P: n/a
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

P: n/a
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

P: n/a
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

P: n/a
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.