HTML Table, Images and Text

[Bjoern Wolfgardt]

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 - the valign is
broken.

<TD width="10" align="left" valign="middle"><IMG src="plus.gif"></TD>
<TD align="left" valign="middle"><IMG src="folder.gif">blah</TD>

What happens. The folder.gif is not valign centered. If I enter
valign=absmiddle for the image all is wonderfull on IE(6). But not on
Mozilla 1.4. Can someone explain me why this is happening? And how can
I correct it?

cu
Bjoern Wolfgardt

[Brian]

Bjoern Wolfgardt wrote:

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 - the valign is
broken.

<TD width="10" align="left" valign="middle"><IMG src="plus.gif"></TD>
<TD align="left" valign="middle"><IMG src="folder.gif">blah</TD>

how can I correct it?

This might help.
http://devedge.netscape.com/viewsource/2002/img-table/

Have you considered using CSS to suggest a presentation?

--
Brian
follow the directions in my address to email me

[Bjoern Wolfgardt]

Brian <us*****@mangymutt.com.invalid-remove-this-part> wrote in message news:<hB******************@rwcrnsc51.ops.asp.att.n et>...

Bjoern Wolfgardt wrote:

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 - the valign is
broken.

<TD width="10" align="left" valign="middle"><IMG src="plus.gif"></TD>
<TD align="left" valign="middle"><IMG src="folder.gif">blah</TD>

how can I correct it?

This might help.
http://devedge.netscape.com/viewsource/2002/img-table/

Have you considered using CSS to suggest a presentation?

Hi,

thx alot. Now I know why it happens. But I think the only solution is
to split the second cell into two seperate cells. That leads me to
another problem. The cell width is not recognized by IE. Mozilla does
it correct (as I understand it).

Here is a little example:
<TABLE ID="1" Border="1" cellpadding="0" cellspacing="0">
<TR ID="tr">
<TD width="20" align="center" valign="middle"><IMG
src="plus.gif" onclick="toggle(this)"></TD>
<TD width="20" align="center" valign="middle"><IMG
src="root.gif" onclick="SelectNode(this)"></TD>
<TD onclick="SelectNode(this)" align="left" valign="middle"
nowrap>RootNode</TD>
</TR>
<TR style="DISPLAY:">
<TD align="left" valign="top"></TD>
<TD align="left" valign="top" colspan="2"><TABLE ID="1.3"
Border="1" cellpadding="0" cellspacing="0">
<TR>
<TD width="20" align="center" valign="middle"><IMG
src="plus.gif" onclick="toggle(this)"></TD>
<TD width="20" align="center" valign="middle"><IMG
src="folder.gif"></TD>
<TD align="left" valign="middle" nowrap><A
onclick="SelectNode(this)">SubNode 1.3</A></TD>
</TR>
<TR style="DISPLAY:">
<TD></TD>
<TD colspan="2"><TABLE ID="1.3.1" Border="1" cellpadding="0"
cellspacing="0">
<TR>
<TD width="20" align="center" valign="middle"><IMG
src="plus.gif" onclick="toggle(this)"></TD>
<TD width="20" align="center" valign="middle"><IMG
src="folder.gif"></TD>
<TD align="center" valign="middle" nowrap><A
onclick="SelectNode(this)">SubNode 1.3.1</A></TD>
</TR>
<TR style="DISPLAY:none">
<TD></TD>
<TD colspan="2"></TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
<TABLE ID="1.2" Border="1" cellpadding="0" cellspacing="0">
<TR>
<TD width="20" align="center" valign="middle"><IMG
src="plus.gif" onclick="toggle(this)"></TD>
<TD width="20" align="center" valign="middle"><IMG
src="folder.gif"></TD>
<TD align="left" valign="middle" nowrap><A
onclick="SelectNode(this)">SubNode 1.2</A></TD>
</TR>
<TR style="DISPLAY:none">
<TD></TD>
<TD colspan="2"></TD>
</TR>
</TABLE>
<TABLE ID="1.1" Border="1" cellpadding="0" cellspacing="0">
<TR>
<TD width="20" align="center" valign="middle"><IMG
src="plus.gif" onclick="toggle(this)"></TD>
<TD width="20" align="center" valign="middle"><IMG
src="folder.gif"></TD>
<TD align="left" valign="middle" nowrap><A
onclick="SelectNode(this)">SubNode 1.1</A></TD>
</TR>
<TR style="DISPLAY:none">
<TD></TD>
<TD colspan="2"></TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>

[Brian]

Bjoern Wolfgardt wrote:

But I think the only solution is to split the second
cell into two seperate cells.
If it's tabular data in the table, then you cannot split it into two
tables. If it is not tabular data, mark it up with table elements.
< http://www.allmyfaqs.com/faq.pl?Tableless_layouts >
Here is a little example:
<TABLE ID="1" Border="1" cellpadding="0" cellspacing="0">
<TR ID="tr">

[code snipped]
It does not, in fact, look like tablular data. See link above. Other
than that, I cannot really make out what's going on with your table by
looking at it in you message. There is too much spacing, causing
wrapping and making it all a bit of a mess. Give us a url instead.

--
Brian
follow the directions in my address to email me