Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    Regular Coder
    Join Date
    Jul 2002
    Posts
    108
    Thanks
    0
    Thanked 0 Times in 0 Posts

    <td> size messed up

    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?

  • #2
    Senior Coder
    Join Date
    Jun 2002
    Location
    Wichita
    Posts
    3,880
    Thanks
    0
    Thanked 0 Times in 0 Posts
    How about a sample of your problem?

  • #3
    Regular Coder
    Join Date
    Jul 2002
    Posts
    108
    Thanks
    0
    Thanked 0 Times in 0 Posts
    <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>
    <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>

  • #4
    Regular Coder
    Join Date
    Jun 2002
    Location
    NL
    Posts
    421
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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>

  • #5
    Regular Coder
    Join Date
    Jul 2002
    Posts
    108
    Thanks
    0
    Thanked 0 Times in 0 Posts
    No, that's not exactly what I meant, but I'll fix that too

    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.

  • #6
    Regular Coder
    Join Date
    Jul 2002
    Posts
    108
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #7
    Regular Coder
    Join Date
    Jun 2002
    Location
    NL
    Posts
    421
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

    Code:
    <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:

    Code:
    <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>

  • #8
    Regular Coder
    Join Date
    Jul 2002
    Posts
    108
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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!)

  • #9
    Regular Coder
    Join Date
    Jul 2002
    Posts
    108
    Thanks
    0
    Thanked 0 Times in 0 Posts
    If I'm correct, it's allowed to have a <td> with width="100%" in a table with width="90%" ?

  • #10
    New Coder
    Join Date
    Aug 2002
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Above

    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

  • #11
    Regular Coder
    Join Date
    Jun 2002
    Location
    NL
    Posts
    421
    Thanks
    0
    Thanked 0 Times in 0 Posts
    >> 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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •