Verspringende tabelranden?

[Verwijderd]

Ik ben sinds kort bezig met een website en ik wilde hem pas uittesten door wat tekst erbij te typen, maar toen ging het fout:'(

In dit gedeelte van de code gaat het fout (denk ik). Zoals je ziet, staat er al wat tekst tussen, maar wanneer ik bijvoorbeeld een "lang" woord gebruik, dan verspringen de randen van de tabel naar links en rechts, waardoor de complete layout word verpest.

code:

<div align="center">
  <center>
  <table border="0" cellpadding="0" cellspacing="0" width="761" height="23">
    <tr>
      <td width="380" height="110" valign="top"><font face="Arial" size="1"><b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        </b></font>
        <p><font face="Arial" size="1"><b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        </b></font><font face="Arial" size="1"><b>Advertisement:</b></font><p>&nbsp;</td>
      <td width="114" height="110" background="lines.jpg">&nbsp;</td>
      <td width="2464" height="110" valign="top" align="left" style="word-spacing: 0; text-align: justify; margin-left: 10; margin-right: 4; margin-top: 0; margin-bottom: 0">
        <p style="word-spacing: 0; margin-left: 5; margin-right: 5; margin-top: 0; margin-bottom: 0"><font color="#F7FAB8"><b><font face="Verdana" size="2">Nintendo
        reveals partnership with EA</font><font size="1" face="Verdana"> </font></b><font size="1" face="Verdana">posted
        by Yordi</font></font></p>
        <p style="word-spacing: 0; margin-left: 5; margin-right: 5; margin-top: 0; margin-bottom: 0"><font face="Times New Roman" size="3">Earlier
        today, Nintendo revealed that it would be creating sportsgames together
        with EA sports to make full use of the GBA link capacity. An interesting
        turn in events, where last week we had lots of negative reports
        regarding Ninty's future.</font></p>
        <p style="word-spacing: 0; margin-left: 5; margin-right: 5; margin-top: 0; margin-bottom: 0">&nbsp;</p>
        <p style="word-spacing: 0; margin-left: 5; margin-right: 5; margin-top: 0; margin-bottom: 0"><font color="#F7FAB8"><b><font face="Verdana" size="2">ESpionage:
        Midway's secret game? </font></b><font face="Verdana" size="1">posted by
        Yordi</font></font></p>
        <p style="word-spacing: 0; margin-left: 5; margin-right: 5; margin-top: 0; margin-bottom: 0"><font size="3" face="Times New Roman">A
        few weeks ago, Midway announced that they were working on a stealth game
        similar to games like Splinter Cell and Metal Gear. Midway did not give
        any other information regarding the game, but today on internet gameshop
        GameStop, a list of upcoming titles was published which included a game
        called ESpionage by Midway. </font></td>
      <td width="101" height="110" background="lines.jpg">&nbsp;</td>
    </tr>
    <tr>
      <td width="380" height="23" valign="top"></td>
      <td width="114" height="23" background="cornerleftbelow.jpg">&nbsp;</td>
      <td width="2464" height="23" background="lines.jpg">&nbsp;</td>
      <td width="101" height="23" background="cornerrightbelow.jpg">&nbsp;</td>
    </tr>
  </table>
  </center>
</div>

Alvast bedankt!

P.S. mocht meer informatie nodig zijn, dan plaats ik die graag.

[Mithrandir]

Tegen lange woorden is clientside weinig te doen.

Wat je wel kunt doen is serverside checken op te lange woorden en die afbreken.

/edit: op zich kan dit ook wel met een javascriptje, maar dat kost veel resources voor je bezoekers ben ik bang

[ Voor 35% gewijzigd door Mithrandir op 07-03-2003 20:04 ]

[Morrar]

Je kunt tekst die buiten bijvoorbeeld een tabelcel gaat wel verstoppen, dit doe je met een stylesheet door bij het betreffende element "overflow: hidden;" op te geven, maar dan zie je dus een stuk van de tekst niet meer.

Bij te lange woorden kun je een <wbr> tag in het woord zetten om aan te geven dat het woord daar door de browser afgebroken mag worden...

Dat zijn wel een beetje de opties die je clientside hebt. Hoopt dat je er wat aan hebt... Post anders even een linkje naar de betreffende pagina dan kunnen we het probleem in de werkelijkheid aanschouwen.

[crisp]

code:

style="table-layout: fixed"

toevoegen aan je <table>; dan worden te lange woorden gewoon afgekapt (geclipped)

[ Voor 24% gewijzigd door crisp op 07-03-2003 20:39 ]

[Verwijderd]

Hier kun je de pagina bekijken: http://dailyreports.netfirms.com/index.shtml

Ik denk dat ik het probleem zo ongeveer wel opgelost heb, de layout blijft nu hetzelfde wanneer ik niews post.
Alleen nu vraag ik me af, waarom de text zo dicht op de randen zit, iemand enig idee hoe ik dat op kan lossen? Ik heb al het een en ander geprobeert met <p margin> etc. maar dat werkt dus niet.

[Verwijderd]

Je moet wel eenheden achter de margins zetten, dus geen margin: 6, maar margin:6px;
Wat makkelijker, volgens mij, is om de linker en rechter padding van de td's aan te pakken.

[Verwijderd]

Verwijderd schreef op 08 March 2003 @ 00:06:
Je moet wel eenheden achter de margins zetten, dus geen margin: 6, maar margin:6px;
Wat makkelijker, volgens mij, is om de linker en rechter padding van de td's aan te pakken.

Als er geen eenheid is opgegeven gaat de browers toch altijd van px uit ?
Oke px er achter is netter maar totaal overbodig, toch ?