[html]table height 100%, werkt niet goed.

[Predje]

Yo Tweakers!

Ik heb een klein irritant probleempje..
Ik heb een tabel die een height heeft van 100% hij zou dat gewoon de pagina moeten vullen en zolang de inhoud niet buiten de 100% komt staat er dus geen scrollbar.
Maar dit is niet het geval... de tabel is wel 100% maar daaronder heb ik dan nog 2a3 pixels over... en nee dat is niet de margin

Kijk hier naar het voorbeeld http://www.moosdijk.com/clbks01/kaal.asp

En hier dan de code van de tabel.. (ik zie er geen fout in)

code:

<table cellspacing="0" cellpadding="0" height="100%" bgcolor="#FFFFFF">
<tr>
<td class="bgl" width="58">&nbsp;</td>
<td valign="top">
<table class="main" cellspacing="0" cellpadding="0">
  <tr> 
    <td width="128" rowspan="3" valign="bottom"><div align="right"> <p class="color">colors 
        [img]"graphics/nieuw_pijltje.gif"><a[/img][img]"graphics/nieuw_rood.gif"[/img]</a><a href="#" class="algemeen" onclick="setActiveStyleSheet('groen'); return false;">[img]"graphics/nieuw_groen.gif"[/img]</a><a href="#" class="algemeen" onclick="setActiveStyleSheet('orange'); return false;">[img]"graphics/nieuw_orange.gif"[/img]</a><a href="#" class="algemeen" onclick="setActiveStyleSheet('blauw'); return false;">[img]"graphics/nieuw_blauw.gif"[/img]</a></td>
    <td width="137" height="15" valign="bottom"><br><p class="logo"> b o e k h a n 
        d e l<br>
        <a href="nieuw_index.asp">[img]"graphics/nieuw_logo.gif"[/img]</a></P></td>
    <td valign="bottom" height="15" width="517"><div align="right">[img]"graphics/nieuw_slogan.gif">&nbsp;&nbsp;</td>
[/img]
  <tr> 
    <td colspan="2" class="inner3" valign="bottom" height="15"> <p class="inner3tekst"> 
        <% = menuboven %>
      </p></td>
  </tr>
  <tr> 
    <td colspan="2" class="inner2" height="10" valign="top">&nbsp;</td>
  </tr>
  <tr> 
    <td width="128" height="185" class="inner1">&nbsp;</td>
    <td colspan="2">&nbsp;</td>
  </tr>
  <tr> 
    <td width="128" height="15">&nbsp;</td>
    <td height="15" colspan="2"><hr width="90%" size="1" color="#D9D9D9" noshade> 
      <p class="adrestekst"> 
        <% = menuonder %><br>
      </p></td>
  </tr>
</table>
</td><td class="bgr" width="58">&nbsp;</td></tr></table>

Ik hoop dat iemand van jullie mij kan helpen..

Groetjes

[André]

Je gebruikt een table in een table, daar zouden die pixels weg kunnen komen: ze de paddings/margins/borders eens op 0. En doe dat ook met de body

[Predje]

André schreef op 10 augustus 2004 @ 10:21:
Je gebruikt een table in een table, daar zouden die pixels weg kunnen komen: ze de paddings/margins/borders eens op 0. En doe dat ook met de body

Zoals je kunt zien staan die al allemaal op nul..

Ik gebruikt ook een extern stylesheet.

hier de code van het tabel gedeelte

code:

body {
    background-color :#707070;
    margin-left: 0;
    margin-top: 0;
    margin-bottom: 0;
    font-family: "tahoma", "Arial", "helvetica";
    scrollbar-face-color: #F1F1F1;
    scrollbar-arrow-color: #CF2D1C;
    scrollbar-track-color: #ffffff;
    scrollbar-shadow-color: #F1F1F1;
    scrollbar-highlight-color: #ffffff;
    scrollbar-3dlight-color: #F1F1F1;
    scrollbar-darkshadow-Color: #F1F1F1;

}
table.main {
    background-color: #ffffff;
    border-width: 0;
    border-style: dotted;
    width: 700;
}
td.collec {
    background-color :#FFFFFF;
    background-image : url("collCF2D1C.jpg");
    background-position: center top;
    background-repeat: no-repeat;
    padding-top: 27px;
    padding-bottom: o px;
}   
td.bgr {
    background-color :#707070;
    background-image: url("bg_r.jpg");
}
td.bgl {
    background-color :#707070;
    background-image: url("bg_l.jpg");
}
td.inner1 {
    background-color: #CF2D1C;
    border-style: none none none none;
    border-color: #000000;
}
td.inner2 {
    background-color: #F1F1F1;
    bottom-padding: 0pt;
    top-padding: 0pt;
    font-size: 3;
}
td.inner3 {
    background-color: #707070;
}
td.boeken {
    border-width: 1;
    border-color: #E5E5E5;
    border-style: none solid solid none;
}
td.flash {
    width: 300;
}

[Verwijderd]

Ik zou even een CSS maken en die table een id geven. Of een class als je em vaker dan 1x gebruikt, die opmaak.

code:

BODY { margin: 0px }
#UITLIJNING { background: #FFF; margin: 0px; height: 100% }

Edit: In je CSS plaatsen.
Wel even in de CSS de hoogte opgeven dus.

[ Voor 20% gewijzigd door Verwijderd op 10-08-2004 11:12 ]

[Predje]

met uitlijning bedoel je de tabel?? ik snap het niet echt denk ik

[Predje]

wat is trouwens dan het verschil tussen een id en een class?

[disjfa]

Id is een unieke naam voor een element, Een classe kan je aan meerdere elementen meegeven.

[Predje]

disjfa schreef op 10 augustus 2004 @ 11:24:
Id is een unieke naam voor een element, Een classe kan je aan meerdere elementen meegeven.

aha, nou gelukkig dan maak ik er goed gebruik van

[Verwijderd]

Predje schreef op 10 augustus 2004 @ 11:18:
met uitlijning bedoel je de tabel?? ik snap het niet echt denk ik

Ja daar bedoel ik de IDnaam mee. Kan van alles wezen dus.
Sorry als ik niet helemaal duidelijk was

[Predje]

Ik heb het geprobeerd maar het werkt niet..
Maar het gekke is dat als ik de tabel op 50% zet de pagina maar half vol is en dan toch een scrollbar heeft die ik een paar pixels kan bewegen...
Dus ik denk niet echt dat het aan de tabel ligt..

Heeft iemand nog een idee?

[André]

Zet in de div met id hidepage je top op 0px

[Predje]

André schreef op 10 augustus 2004 @ 11:52:
Zet in de div met id hidepage je top op 0px

haha, zoveel zitten kloten en dan is het gewoon dat!!!
Thnx man!! het is opgelost, dat ik dat zelf niet heb gezien..

[Verwijderd]

Edit: de oplossing gevonden.
Maar loop even je code na. Zoals Div align en opmaak van <hr> kun je allemaal in CSS kwijt. Werkt ook wat overzichtelijker. Succes!

[ Voor 95% gewijzigd door Verwijderd op 10-08-2004 11:58 ]