...

View Full Version : <td> size messed up



comicw
09-27-2002, 09:34 PM
Hi,

I've got a table problem with one of my pages. I'm using % for width & height.
I've divided a table in a few <td>'s. The problem is that when I place text in the two <td>'s that have to contain text, the whole size of the table is messed up.
How can I maintain the fixed size of my table an still use % for sizing?

Roy Sinclair
09-27-2002, 09:52 PM
How about a sample of your problem?

comicw
09-28-2002, 09:31 AM
<div align="center">
<table border="0" width="90%" cellspacing="0" bgcolor="#52525F" cellpadding="0">
<tr>
<td width="6" height="21">
</td>
</tr>
<tr>
<td width="6" rowspan="2">
</td>
<td align="right" height="44" valign="top" colspan="3" width="700">
<p align="right"><b><u><font color="#FFFFFF" face="Arial Black" size="4">SNAPSHOTS</font></u></b>

</td>
<td rowspan="2" width="9%">



</td>
</tr>
<tr>
<td valign="top" width="40%">
<div align="justify">


<div align="justify">


<div align="justify">
<font color="#FFFFFF" face="Verdana" size="2"><b><a href="../../Mijn%20documenten/Mijn%20webs/mijnweb/images/XMUNL039_72.jpg"><img border="0" src="XMUNL039_72_small.jpg" alt="XMUNL039_72.jpg (143844 bytes)" align="left" width="100" height="149"></a>Ororo
Storms into X-Men Unlimited when</b></font> <font color="#FFFFFF" face="Verdana" size="2"><b>Chris
Claremont and Paul Smith reunite after nearly 20 years!&nbsp;</b></font>
</div>


<div align="justify">
<i><font color="#FFFFFF" face="Verdana" size="1">Ever since he was handed X-MEN
UNLIMITED, associate editor C.B. Cebulski has strived to offer a different
experience to fans of the ever-popular mutants.</font></i>
</div>




<div align="justify">
<b><font color="#FFFFFF" face="Verdana" size="2">Crossgen a friend of <a class="par" href="../../Mijn%20documenten/Mijn%20webs/mijnweb/cgread.htm">Teen
Read Week</a>.</font></b>
</div>



<div align="justify">
<font color="#FFFFFF" size="1" face="Verdana"><i>CrossGen Comics is teaming
with libraries around the U.S. to help promote Teen Read Week, October 13-19,
2002. The theme of this year's Teen Read Week is &quot;Get Graphic at your
Library&quot; and focuses on the use of graphic literature as a tool to promote
reading.</i></font>
</div>



<div align="justify">
<font size="2" face="Verdana" color="#FFFFFF"><b><a href="../../Mijn%20documenten/Mijn%20webs/mijnweb/gotanalias.htm"><img border="0" src="../../Mijn%20documenten/Mijn%20webs/mijnweb/images/ALIAS_16_small.jpg" alt="ALIAS_16.jpg (30446 bytes)" align="left" width="100" height="150"></a>After
a succesful first year, <a class="par" href="../../Mijn%20documenten/Mijn%20webs/mijnweb/gotanalias.htm">Alias</a> gears up for its
secon</b><span style="mso-ansi-language: EN-GB" lang="EN-GB"><b>d.</b></span></font>
</div>



<div align="justify">
<i><font face="Verdana" color="#FFFFFF" size="1">
It's been a year since the debut of ALIAS, the flagship title of Marvel's MAX
label, and the buzz is stronger than ever!&nbsp; Writer Brian Michael Bendis...&nbsp;</font></i>
</div>




<div align="justify">
<a href="../../Mijn%20documenten/Mijn%20webs/mijnweb/truth.htm"><span style="mso-ansi-language: EN-GB" lang="EN-GB"><font color="#FFFFFF" size="2" face="Verdana"><img border="0" src="../edih/mijnweb3/images/TRUTH1cover_small.jpg" alt="Truth" align="left" hspace="5" vspace="3" width="100" height="154"></font></span></a>
</div>


<div align="justify">
<font color="#FFFFFF" size="2" face="Verdana"><span style="mso-ansi-language: EN-GB" lang="EN-GB"><b>Marvel
reveals the controversial story behind an American Icon in <a class="par" href="../../Mijn%20documenten/Mijn%20webs/mijnweb/truth.htm">Truth</a>.</b></span></font>
</div>



<div align="justify">
<span lang="EN-GB" style="mso-ansi-language: EN-GB"><i><font face="Verdana" color="#FFFFFF" size="1">In
the Tradition of the Hit Story Origin, Marvel Discloses the Secret History of
One of the World's Most Popular Heroes : Captain America! Truth Exposes a Time
of Racial Segregation and Oppression When an African-American Was Not Allowed
To Carry the Moniker of America!</font></i></span>
</div>


<div align="justify">
&nbsp;
</div>


<div align="justify">
&nbsp;
</div>


<div align="justify">
&nbsp;
</div>


<div align="justify">
<font face="Verdana" size="2"><b><a href="../../Mijn%20documenten/Mijn%20webs/mijnweb/sup10c.htm">
<font color="#FFFFFF"><img border="0" src="../edih/mijnweb3/images/Supmcd_small.jpg" alt="Superman" align="left" hspace="5" vspace="3" width="100" height="151"></font></a></b></font>
</div>


<div align="justify">
<font face="Verdana" size="2"><b><font color="#FFFFFF">After
pulling off a stunt with Batman: The 10-Cent Adventure, DC plans on doing the
same in January 2003 with its flagship hero <a class="par" href="../../Mijn%20documenten/Mijn%20webs/mijnweb/sup10c.htm">Superman</a>.</font></b></font>
</div>


<div align="justify">
&nbsp;
</div>


<div align="justify">
<i><font face="Verdana" color="#FFFFFF" size="1">Following
the immense succes of Batman: The 10-Cent Adventure, DC pulls off another
stunt. No, not Batman, we're talking about their other flagship character
here...&nbsp;</font></i>
</div>



<div align="justify">
<font face="Verdana" size="2"><b><a href="../../Mijn%20documenten/Mijn%20webs/mijnweb/wolv181.htm">
<font color="#FFFFFF"><img border="0" src="../edih/mijnweb3/images/wolvey181cvr_small.gif" alt="Wolverine #181" hspace="5" vspace="3" align="left" width="100" height="153"></font></a></b></font>
</div>
<div align="justify">
<font face="Verdana" size="2"><b><font color="#FFFFFF">Friends
don't let friends drink with Logan! Editor Axel Alonso makes his mark on <a class="par" href="../../Mijn%20documenten/Mijn%20webs/mijnweb/wolv181.htm"> Wolverine
#181</a>!</font></b></font>
</div>
<div align="justify">
&nbsp;
</div>
<div align="justify">
<span lang="EN-GB" style="mso-ansi-language: EN-GB"><i><font face="Verdana" color="#FFFFFF" size="1">He
swept all of this year's &quot;Best Editor&quot; awards. He's been profiled in
Vibe magazine. He's constantly interviewed by reporters around the globe...</font></i></span>
</div>
<div align="justify">
&nbsp;
</div>
</div>


</div>


<div align="justify">
&nbsp;
</div>


<div align="justify">
&nbsp;
</div>


<div align="justify">
&nbsp;
</div>


&nbsp;
</div>
</td>
<td width="10%">
&nbsp;
</td>

<td valign="top" width="40%">


<div align="justify">
<div align="justify">
<font color="#FFFFFF" size="2" face="Verdana"><b>Crossgen starts its <a class="par" href="cg_keyissue.htm">Key
Issue Program</a>.</b></font>
</div>
<div align="justify">
&nbsp;
</div>
<div align="justify">
<i><font color="#FFFFFF" face="Verdana" size="1">In December, direct market
comic shop customers will begin to see a new look popping up with certain
issues of every CrossGen Universe title. These new logos and trade dresses are
the banner for CrossGen's new Key Issue Program, aimed at helping new readers
jump on-board CrossGen's existing monthly titles. Each Key Issue will
contain...</font></i>
</div>
<div align="justify">
<font color="#FFFFFF" face="Verdana" size="2"><b><a href="edenstrail.htm"><img border="0" src="../../../WINDOWS/edih/mijnweb3/images/edenstrail_small.jpg" alt="Eden's Trail" align="left" hspace="5" vspace="3" width="100" height="150"></a></b></font>
</div>
<div align="justify">
<font color="#FFFFFF" face="Verdana" size="2"><b>Marvel believes it has
another sure-fire hit on its hands with <a class="par" href="edenstrail.htm">Eden's
Trail</a>, a new series created by hot up-and-coming artist Steve Uy. The
first issue of this series will be on the stands November 6.</b></font>
</div>
<div align="justify">
<font face="Verdana" color="#FFFFFF" size="1"><i>If we have to believe
Marvel's Bill Rosemann, the industry leader will soon have a new hit on..&nbsp;</i></font>
</div>
<div align="justify">
<div align="justify">
<span lang="EN-GB" style="mso-ansi-language: EN-GB"><font face="Verdana" size="2"><o:p>
<font color="#FFFFFF"><a href="sd100.htm"><img border="0" src="../../../WINDOWS/edih/mijnweb3/images/SD100b_small.jpg" align="left" hspace="5" vspace="3" alt="Savage Dragon #100" width="100" height="154"></a></font></font></span>
</div>
<div align="justify">
<font color="#FFFFFF" size="2" face="Verdana"><b>Savage
Dragon #100 sells out.&nbsp;<br>
Read more about this milestone issue&nbsp;and upcoming events <a class="par" href="sd100.htm">here</a>.</b></font>
</div>
<div align="justify">
<i><font color="#FFFFFF" face="Verdana" size="1">Image Comics recently
announced that Diamond has completely sold out of SAVAGE DRAGON #100. A
second printing, featuring an all-new cover by creator Erik Larsen, was also
announced. To celebrate the...</font></i>
</div>
<p>&nbsp;
</div>
<div align="justify">
<font face="Verdana" size="2"><a href="forge_edge.htm"><font color="#FFFFFF"><img border="0" src="../../../WINDOWS/edih/mijnweb3/images/Edge9_small.jpg" alt="Forge &amp; Edge" align="left" hspace="5" vspace="3" width="100" height="158"></font></a></font>
</div>
</div>
</div>
</div>


</td>
</tr>
<tr>
<td width="9%">

</td>
</tr>
</table>

MCookie
09-28-2002, 10:16 AM
You mean your divs are overlapping, right? That's because you use the align attribute in your image tags.
Use this: <br clear="all"> below the divs in which you have aligned an image.

Like this:
<div><img src="" width="" height="" alt="" align="left">text text text</div><br clear="all">
<div>text text</div>

comicw
09-28-2002, 11:44 AM
No, that's not exactly what I meant, but I'll fix that too :thumbsup:

The 'real' problem is that size of the table should be 90%, but when I fix that, my td's are messe up, even when I don't give them a certain width.

comicw
09-28-2002, 11:47 AM
oh yeah: when I don't divide my main td with all the text into 2 td 's (so just one text-element below the previous etc.), then I d on't have the problem.
So basically what I'm looking for is a way to divide the td with all the text into two equal parts with a little space in between.

MCookie
09-28-2002, 12:33 PM
Below is, without content and other distracting stuff, the 4 rows of your table.
I'm afraid it doesn't make sense at all... it's possible to use relative and absolute sizes in one flexible table, but you really have to know what you're doing, you can't just mix pixels and percentages.
When, for instance, in row 2, you say td width="700" colspan="3" what must a browser do when in the next row these three cells are 40, 10 and 40%?
700 pixels or 90%?
Better use relative values everywhere. And, using rowspan and colspan, make sure every row has the same amount of cells.


<table width="90%" cellspacing="0" cellpadding="0">

<tr>
<td width="6" height="21"></td>
</tr>

<tr>
<td width="6" rowspan="2"></td>
<td width="700" colspan="3"></td>
<td width="9%" rowspan="2"></td>
</tr>

<tr>
<td width="40%"></td>
<td width="10%"></td>
<td width="40%"></td>
</tr>

<tr>
<td width="9%"></td>
</tr>

</table>

So, best thing is to start over with something like this:


<table width="90%" cellspacing="0" cellpadding="0">

<tr>
<td colspan="5" width="100%"></td>
</tr>

<tr>
<td width="95%" colspan="4"></td>
<td width="5%" rowspan="2"></td>
</tr>

<tr>
<td width="5%"></td>
<td width="40%"></td>
<td width="10%"></td>
<td width="40%"></td>
</tr>

<tr>
<td colspan="5" width="100%"></td>
</tr>

</table>

comicw
09-29-2002, 04:53 PM
But I only have to use this with the page I have a problem on? Because I've tested the other pages in all screen resolutions and on different computers and they all looked the way they should (then again, I used percentages mostly there!)

comicw
09-29-2002, 05:11 PM
If I'm correct, it's allowed to have a <td> with width="100%" in a table with width="90%" ?

AlienSkater23
09-29-2002, 10:09 PM
comic to justify what u said i think you can becuase if u set the <td> width to 100% that is setting it to 100% of the 90% that the table is at. im prett ysure about that. if that makes sense

MCookie
09-29-2002, 10:19 PM
>> tested the other pages in all screen resolutions and on different computers and they all looked the way they should

If your other pages look ok, then why not use one of them as a template for this one?


>> If I'm correct, it's allowed to have a <td> with width="100%" in a table with width="90%" ?

Yes. If you have a <TR> with one <TD> in it, you want it to be as wide as the table. 100% of the width of the table.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum