473,544 Members | 2,185 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

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
7 28079
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********@yah oo.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********@yah oo.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.*********@ex ample.invalidwr ote:
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

0
1827
by: QWERTY | last post by:
--------------Boundary-00=_O5I3QL80000000000000 Content-Type: Multipart/Alternative; boundary="------------Boundary-00=_O5I3LVC0000000000000" --------------Boundary-00=_O5I3LVC0000000000000 Content-Type: Text/Plain; charset="iso-8859-9" Content-Transfer-Encoding: quoted-printable
3
16501
by: Bjoern Wolfgardt | last post by:
Hi, I am a little bit confused. Maybe someone can explain what I am doing wrong. I have a table with 2 cells in it. In the first cell I have an image. The image is left aligned and centered. In the second cell I also put an image. It is also left aligned and centered. It works wonderfull. But now I add some Text to the second cell. Baff...
4
1590
by: Daniel | last post by:
I'm having a tough time getting text and image to align in a table. When I add the image for some reason the text in that cell shifts to the bottom of the cell. Below is the code and the result. How can get everything to align in the vertical middle? Thank you. <table> <tr> <td> <img src="picture.gif"> TEXT_A
1
4860
by: Eric Adem | last post by:
Try out the following code: <html> <body> <table onMouseOut="alert('out');" width="50%" height="50%" bgcolor=yellow><tr><td> <table width="100%" height="100%"><tr valign=middle> <td align=center bgcolor=lightblue>1</td> <td align=center bgcolor=palegreen>2</td> </tr></table> </td></tr></table>
1
11904
by: Don Grover | last post by:
I have a table thats wrapped in a div tag, that when user selects 1 of 2 radio buttons it hides or shows table, this works ok. But I want to set the table show hide on what the existing state of radio buttons are on page load aswell, so if one button is allready selected then the table is hidden else it is shown, can some help me with this,...
2
1740
by: Raed Sawalha | last post by:
I have the following table in ascx , when I click the button the table style not showing in the popup , it is ONLY showing on the page not in the popup...WHY? <TABLE style="BACKGROUND: #d8e8f5;CURSOR:hand" bgcolor="#d8e8f5" id="tblMenu" cellSpacing="0" cellPadding="2" width="150" border="1"> <TR> <TD class="standerdfont" >New Document</TD>...
2
12179
by: Tasman | last post by:
Is there an equivalent of valign="bottom" for a table within a DIV using CSS? I've found I can center a table of buttons in a DIV with {margin-left:auto; margin-right:auto}. But I am unsure how to get this table to sit at the bottom of the DIV. Example code follows, or see http://home.exetel.com.au/tas/valign/test01.html
5
2654
by: Hymer | last post by:
Hello, I have a small two-column table with three rows. The first column has a logo and the second column has the name of the organization. The logo's in the first column are too high. That is, they don't align horizontally with the organization name. I need to lower the logo's within the column. However, I don't know how to manipulate...
7
1935
by: Jef Driesen | last post by:
How can I replace/override the table attributes align, border, cellpadding and cellspacing with css?
11
1905
by: Hymer | last post by:
Hello, I have a small table that works fine in IE6 but does not render at all in Opera or Firefox. Can anyone see what might be needed to get this to work in all three browsers? The code is below.
0
7437
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main...
0
7373
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language...
0
7625
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. ...
1
7389
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For...
0
5928
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then...
0
4930
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert...
0
3421
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
1848
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
0
677
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.