[CSS] Div 100% height in table cell in IE

[Verwijderd]

Ik probeer een DIV in een <TD> 100% hoogte te geven van de <TD>.
In FireFox is het geen probleem, maar IE negeerd alle opties. Ik heb een aantal CSS hacks geprobeerd, heb de <TD height=100%> geprobeerd ......

Cascading Stylesheet:

.table {
    border-right-width: 1px;
    border-right-style: solid;
    border-right-color: #725142;
    min-height:100%;
    height: 100%;
    overflow: visible;
}

HTML:

<td width="33%" height="100%" valign="top">
    <div class="table">
        <h1 class="subject">Snippet.</h1>
        <p class="subject">&nbsp;</p>
    </div>
</td>

[ Voor 24% gewijzigd door Verwijderd op 04-11-2005 08:21 ]

[Verwijderd]

Allereerst, waarom noem je je divclass table? Niet dat dit problemen geeft (volgens mij...), maar is niet echt logisch. Ten tweede, hoeveel rijen heb je in de hoofdtabel waar de td in staat? Als je daar alleen deze rij in zet, de hoofdtabel op 100% height zet, gaat het dan niet goed? De td height=100% zorgt dat hij voor 100% hoogte in de hoofdtabel staat.

[Verwijderd]

Waarom hij .table heet , tja wist zo snel even geen andere naam. Ik ben bezig met een template pagina dus de naamgevingen zijn nog enig sinds ongemakkelijk.

Daarnaast is een class naam table niet geheel raar, want dan kan je wel een ".table p" anders doen dan een ".div p" etc, ... Maar ik bedenk me dat table.p dan ook weer kan ...............

om terug te komen op je vraag:
Er zitten 2 <TD> per Row. Ik dacht ooit ergens gelezen te hebben dat als je een DIV 100% hoog wil krijgen je het element waarin de DIV zit ook op 100% hoogte moet zetten.

Maar hoe krijg ik die DIV nou wel 100% van de <TD> hoogte in IE. In FireFox lukt het dus wel.

[ Voor 26% gewijzigd door Verwijderd op 04-11-2005 10:01 ]

[Verwijderd]

Dat je de td 100% moet geven, is volgens mij onzin. Dat je de td 100% geeft, zorgt ervoor dat hij 100% van de hoogte van de tabel probeert te gebruiken. De div 100% geven zou er voor moeten zorgen dat hij voor 100% in de td wordt geplaatst.
Die div wordt dus niet voor 100% in die td geplaatst?? Je bent niet echt duidelijk . En ik vroeg hoeveel rijen er waren in de table, niet hoeveel td's aangezien dit niet echt veel met de hoogte te maken heeft .

[ Voor 35% gewijzigd door Verwijderd op 04-11-2005 10:24 ]

[Verwijderd]

Verwijderd schreef op vrijdag 04 november 2005 @ 10:23:
Die div wordt dus niet voor 100% in die td geplaatst?? Je bent niet echt duidelijk . En ik vroeg hoeveel rijen er waren in de table, niet hoeveel td's aangezien dit niet echt veel met de hoogte te maken heeft .

Maar hoe krijg ik die DIV nou wel 100% van de <TD> hoogte in IE was toch wel duidelijk, of misschien alleen voor mij .
De table is als volgt en heeft dus precies 1 rij.

Het idee is dus dat er in de rechter colom meer text staat waardoor hij langer is dan de linker.
De linker colom heeft een border aan de rechter kant die dus niet net zo lang is als de tabel, omdat de text in de DIV links minder is dan de text in de colom rechts. .............. Nu snap ik het ook niet meer.

Kijk maar naar het verschil tussen IE en FireFox:
http://dev.lemonstudios.net/showsnippet.aspx?CodeID=6

HTML:

<table width="752px" border="0" cellpadding="0" cellspacing="0">
    <tr>
       <td width="33%">
           <div class="table">
              <h1 class="subject">Header1</h1>
              <p>2 regels text</p>
           </div>
       </td>
       <td>
          <p>hele lappen text</p>
       </td>
    </tr>
</table>

[ Voor 56% gewijzigd door Verwijderd op 04-11-2005 10:50 ]

[Verwijderd]

Ah, nu zie ik het probleem ja. Probeer het eens zo:

code:

<table width="752px" border="0" cellpadding="0" cellspacing="0">
    <tr>
       <td width="33%" height="100%">
           <div class="table" height="100%">
              <h1 class="subject">Header1</h1>
              <p>2 regels text</p>
           </div>
       </td>
       <td height="100%">
          <p>hele lappen text</p>
       </td>
    </tr>
</table>

[disjfa]

Of je gebruikt gewoon je table en zet er geen div in. Beetje onnozel om een extra element toe te voegen zonder extra waarde.

En verder zou je ook gewoon al je styles in de stylesheet kunnen zetten ipv half om half html design en css design. Dat is wel zo netjes en overzichtenlijk.

[ Voor 40% gewijzigd door disjfa op 04-11-2005 10:57 ]

[Verwijderd]

disjfa schreef op vrijdag 04 november 2005 @ 10:56:
Of je gebruikt gewoon je table en zet er geen div in. Beetje onnozel om een extra element toe te voegen zonder extra waarde.

En verder zou je ook gewoon al je styles in de stylesheet kunnen zetten ipv half om half html design en css design. Dat is wel zo netjes en overzichtenlijk.

Waar haal je het idee vandaan dat ik mijn styles niet in een stylesheet heb staan.
Kijk anders even naar de source.

code:

<link href="layout.css" rel="stylesheet" type="text/css" />
<link href="styles.css" rel="stylesheet" type="text/css" />

[Verwijderd]

Hij bedoelt dat het netter is de td, table attributes ALLEMAAL in je css te zetten .

[Verwijderd]

Verwijderd schreef op vrijdag 04 november 2005 @ 10:53:
Ah, nu zie ik het probleem ja. Probeer het eens zo:

Helaas.

[Verwijderd]

Haal die div anders eens helemaal weg, zoals disjfa zegt...

Klopt het trouwens dat ik een of andere error op die site van je krijg?

[Verwijderd]

Verwijderd schreef op vrijdag 04 november 2005 @ 11:10:

Klopt het trouwens dat ik een of andere error op die site van je krijg?

Misschien, ligt er natuurlijk aan wat de error is.
Waarschijnlijk als je een CodeID meegeeft die niet klopt krijg je een error.
Anders zou ik het niet weten, het zijn in totaal maar 3 pagina's dus echt veel kan er nog niet mis gaan.

En begrijp me niet verkeerd, die DIV heeft uiteindelijk een functie.
Die TABLE gebruik ik alleen om 2 colommen te kunnen maken. Die DIV die er nu staat wordt dan een menu met een bepaalde layout, maar daarnaast kunnen er nog andere DIV's in die colom met een hele andere layout. Dat wordt lastig als je dan niet met DIV's werkt lijkt mij.

Ik zit net allemaal tutorials te bekijken over hoe ouderwets layouts met tabellen en nested tabellen zijn dus ik probeer juist richting CSS layout te gaan, vandaar mijn aanpak.

[ Voor 41% gewijzigd door Verwijderd op 04-11-2005 11:16 ]

[Boelie-Boelie]

Volgens mij is die tabel helemaal niet nodig, maar om het zeker te weten toch maar ff een vraag: zonder in termen van divs of tabellen te vervallen, wat voor effect wil je nou precies bereiken? Twee kolommen naast elkaar, eentje voor Snippet, de andere voor 'Avoid the Httpbla'? Verder nog eisen aan die kolommen?

[ Voor 27% gewijzigd door Boelie-Boelie op 04-11-2005 12:12 ]

[Verwijderd]

mijn eisen zijn eigenlijk vrij simpel.
Ik wil 2 colommen, eentje links voor menu's, anouncements etc.
Recht komen gewoon de snippets of andere content van de site.
Voor het "mooie" zit er een lijn tussen de twee colommen.

Maar we dwalen nu wel een beetje af van het onderwerp, want het komt er op neer dat de <div height=100%> wel in FireFox werkt maar niet in IE dus ik wil alleen weten hoe ik het in IE wel voor elkaar krijg.

In FireFox is hij dus 100% hoog van het element waar hij in genested zit. In IE is hij net zo hoog als de content van de DIV.

[Boelie-Boelie]

Nogmaals, die tabel is niet nodig. Zie bijv.:
- 2-kolomslayout (uitleg)
- Andere 2-kolomslayout (uitleg)
- Google search op 'faux columns'

Verder zou ik idd alle styling in je stylesheet zetten. En ik zie nogal raar gebruik van h1, h2, spans, er missen p's waar wel p's horen en die <strong> hoort daar ook niet. Een tip is de Markup Guide op Mezzoblue.

[Verwijderd]

Laat ik me eens gaan verdiepen in deze links.

[Verwijderd]

Hey, waarom niet gewoon de border aan de table-cell toekennen ipv aan de div in de table-cell? De table cell zelf is toch die 100% die je zograag wilt hebben?

zie: http://aukevanleeuwen.nl/?fuseaction=tweakers

(Oh ja en ik heb dus ook de cellpadding en de spacing omgedraaid, dat begrijp je.) Het is niet supernetjes gedaan nu, maar je kan zelf alles wel in classes gooien ipv via het style attribuut.

--
Auke

[edit: typo]

[ Voor 5% gewijzigd door Verwijderd op 04-11-2005 15:10 ]

[Verwijderd]

Van de eerder gegeven link:

To avoid the HttpRequestValidationException Exception you' ll have to set the flag validateRequest in the page directive. The .NET framework will escape the illegal characters like < ' >. It will replace the character < with < The browser will correctly interpret the < and shows the char < to the user.

Je wilt deze waarschijnlijk nog wel een keer 'HTMLEncoden / Escapen', nu staat er iets als: It will replace the character < with <, niet zo heel nuttig. Als je het zou HTMLEncoden zou dat iets worden als: it will replace the character < with &lt;.

---
Auke

[BtM909]

arbor: als het de laatste replier bent, kan je je bericht ook editten met de en daarnaast hoef je niet onder elke post de groeten te doen.

[Verwijderd]

Is het misschien een id om aan je <table> tag het volgende toe te voegen:

height="100%"

[ Voor 14% gewijzigd door Verwijderd op 04-11-2005 16:06 ]

[Boelie-Boelie]

Tabellen gebruiken voor layout is al niet zo netjes, om er dan ook nog een height aan mee te geven terwijl je volgens de HTML 4-specs niet eens een height aan een tabel behoort mee te geven...
Dat kan overigens evenmin aan een table cell.

[Verwijderd]

Ben het helemaal met je eens, maar in de meeste browsers werkt het wel.

*Probeert het ook altijd te voorkomen als ie aan het bouwen is*

[Verwijderd]

Kijk anders eens op deze pagina, bij de hoofding "Vertical centering". Daar staat hoe je aan een tabel 100% height geeft .
Staat een hybride oplossing voor dit probleem.

Tabellen voor lay-out gebruik voorkomen is beter dan genezen maar vergeet niet dat tabellen wél gebruikt worden voor pure data in te steken. (Dat was geloof ik de oorspronkelijke bedoeling van tabellen).

OT:
Ik geloof dat we tabellenlay-outs dankbaar mogen zijn, zonder deze creatieve lay-outvorm was bvb css er niet eens doorgekomen en zaten we nu met een relatief saai web .