[CSS] Height van een TD, IE(6) doet &#039;raar&#039;

woensdag 5 maart 2003 16:13

Topicstarter

Ik ben bezig met een site, het lukt allemaal aardig, maar nu ben ik toch op een vreemd probleem gekomen

Ik zal eerst even wat code posten, zodat jullie zien waar het om gaat:

XHTML:

code:

<body>

<center class="root">
<table class="root">
 <tr>
  <td colspan="3" class="rootTop">[img]"toplogo.gif"[/img]</td>
 </tr>
 <tr>
  <td class="rootStats">
   1
  </td>
  <td class="rootNav">
   2
  </td>
  <td class="rootContent">
   3
  </td>
 </tr>
</table>
</center>
</body>

CSS (gestripte versie, kleuren enzo er uit):

code:

BODY {
    padding: 0px;
    margin: 0px;
}

CENTER.root {
    position:fixed;
    top:0px;
    left:0px;
    right:0px;
    bottom:0px;
}

TABLE.root {
    width: 770px;
    height: 100%;
    border-collapse: collapse;
    border-width: 0px;  
    text-align: left;
}

TD.rootTop {
    padding: 0px;
    height: 62px;;
}

TD.rootStats {
    background-color: #557C09;
    padding: 0px;
    width: 180px;
    height: 100%;
}

TD.rootNav {
    padding: 0px;
    width: 134px;
}

TD.rootContent {
    padding: 0px;
    width: 456px;
}

Wat ik weil is dat alles in de 2e TR mooi door loopt tot aan de onderkant van de browser. Dit werkt op deze manier ook prima in Opera (7.01) en Mozilla (1.1), maar IE6 doet lekker niet mee

Wat ik ook heb geprobeerd isbij de body of center nog "height: 100%;" te zetten, maar dan wordt die TR even hoog als de pagina, waardoor je moet scrollen.

Weet iemand hoe ik dit op kan lossen? .. bvd.

Ik werd met de search niet echt veel wijzer, die topics ging over tables met 1 tr.

Acties:

supakeen

Gee de url naar die site eens? Want ik snap zo niet 1 2 3 wat je precies bedoeld

woensdag 5 maart 2003 16:19

Acties:

woensdag 5 maart 2003 16:35

Topicstarter

oops, las je post beetje verkeerd.

Maar ik heb de site niet op een public server staan..
Ik zal ff screenshots maken

[ Voor 198% gewijzigd door Mafioso op 05-03-2003 16:23 ]

Acties:

woensdag 5 maart 2003 16:49

Topicstarter

Oke hier de screens..

Afbeeldingslocatie: http://130.89.162.95/~mafioso/IEfout1.jpg

Zo laat IE6 de pagina zien met in m'n eerste post gegeven CSS. Die cellen waar 1, 2 en 3 in staan moeten eigenlijk doorlopen tot onderaan m'n beeld, maar doen dat dus niet.

Afbeeldingslocatie: http://130.89.162.95/~mafioso/IEfout2.jpg

Afbeeldingslocatie: http://130.89.162.95/~mafioso/IEfout2.jpg

Hierbij staat er onder body{} ook "height: 100%;". En zoals je kan zien loopen de cellen dan weer net te ver, ik moet nl scrollen

(de cellen met 1, 2 en 3 zijn precies zo hoog als mn window)

Afbeeldingslocatie: http://130.89.162.95/~mafioso/Operagoed.jpg

Opera (en ook Mozilla) laat in beide gevallen de pagina wel goed zien.

Acties:

{ @$%&# }

verkeerde XHTML doc-type...

[edit:]
laat ik dan gelijk ff de goeie geven

code:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="nl">

[ Voor 85% gewijzigd door Hangloozz op 05-03-2003 16:50 ]

woensdag 5 maart 2003 16:57

Acties:

woensdag 5 maart 2003 17:10

Topicstarter

hehe, heel erg bedankt.

En ik maar me helemaal te pletter denken, wat ik nou allemaal fout deed in CSS of de html.

Het rare is wel dat de W3 Validater in zowel de CSS als xhtml file geen errors vond.

Acties:

{ @$%&# }

nog ff een tipje:

code:

1	<center class="root">

is deprecated (verouderd), je kunt het hier in je body-style opgeven.

code:

BODY {
    padding: 0px;
    margin: 0px;
    text-align: center;
}

woensdag 5 maart 2003 20:16

Acties:

woensdag 5 maart 2003 23:04

Topicstarter

Hmmz, ik had die verandering in het volste vertrouwen dat het ook zou werken gedaan, maar helaas bleek echter het tegenovergestelde.

Ie(6) pakt het wel prima, maar Mozilla en Opera _niet_. Die text-align werkt blijkbaar niet op de table, en ik heb verder in de table ook niet staan align="center" ofzo. Dus de tabel komt mooi links in beeld te staan.

code:

    position:fixed;
    top:0px;
    left:0px;
    right:0px;
    bottom:0px;

Zonder de bovenstaande code werkt in Mozilla en Opera de "height: 100%;" op de tabel em td's ook niet meer, omdat er geen parent is met opgegeven hoogte.

Ik ga dus maar weer terug naar de oorspronkelijke code

Acties:

crisp

Devver

Pixelated

centreren kan met een hack:

code:

div.gecentreerd {
  position: absolute;
  width: 700px;
  height: 100%;
  left: 50%;
  top: 0px;
  margin-left: -350px; // de helft van de width
  border: 1px solid #000000;
}

met

HTML:

1	<div class="gecentreerd">bla</div>

Intentionally left blank

woensdag 5 maart 2003 23:48

Acties:

{ @$%&# }

tsjonge, werkt dat centreren nou ook al niet op tabellen

wat heb je uberhaupt nou aan text-align en vertical-align als ze in de belangrijkste elementen niet werken..

* Hangloozz gaat in een hoekje zitten sikkeneuren..

woensdag 5 maart 2003 23:57

Acties:

crisp

Devver

Pixelated

Hangloozz schreef op 05 March 2003 @ 23:48:
tsjonge, werkt dat centreren nou ook al niet op tabellen wat heb je uberhaupt nou aan text-align en vertical-align als ze in de belangrijkste elementen niet werken..

* Hangloozz gaat in een hoekje zitten sikkeneuren..

misschien heet het wel niet voor niets text-align

maar inderdaad; het is wel een gemis, zeker als ze <center> als deprecated aanmerken....

Intentionally left blank

donderdag 6 maart 2003 00:09

Acties:

{ @$%&# }

ja als we zo gaan beginnen dan mag ik m'n images d'r ook niet mee uitlijnen..en iets als block-align bestaat niet

offtopic:
fok, volgens mij is m'n ramplank versleten; ik begin steeds meer letters over te slaan...

[ Voor 36% gewijzigd door Hangloozz op 06-03-2003 00:12 . Reden: typo's ]

donderdag 6 maart 2003 00:12

Acties:

Verwijderd

Als je text-align van het omvattende element op center zet, en de margin-left en margin-right van het te centreren element op auto, dan gaat het wel lukken, waarschinlijk.

donderdag 6 maart 2003 02:30

Acties:

donderdag 6 maart 2003 02:48

Topicstarter

Ik gebruik toch maar gewoon <center>, dit werkt gewoon goed zonder geouwenhoer, en werkt gewoon in alle browsers.

Ik stuitte trouwens nog op een ander probleem in IE, en het is blijkbaar 1 of andere bug:

HTML:

<td class="rootStats">
   [img]"toplogo2.gif"[/img]<br>
   Test 1,2 :P<br>
   Blegh .....
 </td>

Met de bovenstaande code werd het plaatje toplogo2.gif in IE6 niet helemaal rechts geplaatst, maar 3 pixels naar links. Opera en Mozilla lieten het plaatje echter wel gewoon op de juiste plaats zien.

Ik heb toen de volgende workaround gedaan:

HTML:

<td class="rootStats">
   <div style="text-align:right;">[img]"toplogo2.gif"[/img]</div>
   Test 1,2 :P<br>
   Blegh .....
 </td>

Dit kon ik zo ook prima gebruiken omdat er toch geen text op de zelfde hoogte als het plaatje moet komen.

[ Voor 14% gewijzigd door Mafioso op 06-03-2003 02:31 ]

Acties:

Verwijderd

je hebt nu dit:

<td class="rootStats">
<div style="text-align:right;">[img]"toplogo2.gif"[/img]</div>
</td>

Is wel een leuk gezicht hoor, zo'n div binnen een td maarre, je kan toch ook de stylesheet veranderen?

TD.rootStats {
background-color: #557C09;
padding: 0px;
width: 180px;
height: 100%;
text-align: right;
}

<td class="rootStats">
[img]"toplogo2.gif"[/img]
</td>

Scheelt je de volgende keer weer wat tikwerk. Als je dan toch wil tikken kan je beter de hoogte en de breedte van je image erbij zetten

donderdag 6 maart 2003 17:08

Acties: