Height Table niet vast in IE

[Beuker]

Wellicht zien jullie dit vaker en hebben jullie een mooie oplossing, maar ik kom er even niet meer uit.

Het probleem is dat in het vak waar de 2 en de 5 staan toch groter worden onder IE. Onder Firefox gaat het dus wel goed. Hieronder de simpelere code zonder opmaak.

code:

<table cellspacing="2" cellpadding="2" border="1" width="600">
<tr>
    <td colspan="3">1</td>
</tr>
<tr>
    <td width="100" height="200">2</td>
    <td rowspan="2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean nisi. Aliquam blandit consectetuer ante. Sed in purus. Fusce arcu nisi, tincidunt et, sagittis in, consectetuer sed, est. Maecenas sagittis, odio non eleifend aliquet, elit purus tincidunt sapien, et facilisis est ligula eu enim. Maecenas ullamcorper, elit at sagittis molestie, dui pede blandit elit, vel aliquam enim justo id dui. Maecenas aliquet hendrerit est. Phasellus laoreet. Sed nisi. Nam leo. 
Proin ligula. Nunc tempus. Praesent molestie volutpat pede. Nam hendrerit molestie tellus. Quisque iaculis erat non est luctus aliquet. Quisque dolor arcu, faucibus viverra, vulputate a, suscipit id, erat. Etiam vitae pede eget tortor commodo lobortis. Phasellus quis nisi et est condimentum luctus. Morbi ipsum. In rutrum euismod metus. Aliquam ut est. Vestibulum scelerisque pede vel metus. Sed ipsum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam vel ipsum eget erat elementum dictum. Sed porttitor iaculis felis. Phasellus ac pede. Fusce fringilla nisi at dolor. Duis id enim. 
Sed sem tellus, posuere quis, convallis sagittis, porta non, felis. Cras pretium nisi quis leo. Donec aliquet porta eros. Integer lobortis eleifend tellus. Donec nulla. Proin non augue. Curabitur imperdiet. Maecenas lectus tellus, iaculis vehicula, dignissim tristique, rhoncus id, eros. In hac habitasse platea dictumst. Suspendisse sapien. Donec non nibh id velit pharetra sagittis. In ut elit. Donec aliquet risus sed lectus. Nam rutrum nibh sit amet dui. Curabitur turpis magna, blandit sed, volutpat non, blandit in, nunc. Sed tincidunt, neque in consectetuer suscipit, turpis eros rhoncus diam, at luctus justo enim eget ligula. Cras accumsan cursus metus. Nulla eleifend scelerisque leo. 
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean in erat. Donec enim. Quisque convallis, risus at ornare elementum, leo elit ornare ante, ut accumsan eros augue at enim. Aliquam erat volutpat. Vivamus gravida. Cras auctor pede at pede. Duis odio est, elementum non, ultrices in, condimentum nec, enim. Nullam orci. Vestibulum diam. Nulla feugiat lacus non mi. Integer vehicula, nulla non accumsan blandit, nunc lectus blandit purus, et pellentesque metus lorem at purus. Donec tellus. Fusce iaculis dictum lacus. Aliquam ac nulla. Donec ornare sagittis lorem. Suspendisse potenti. 
Quisque molestie. Maecenas leo nunc, eleifend quis, congue vel, posuere vel, purus. Praesent pede. Etiam convallis nisi eget ante. Nulla tristique. Aliquam magna dui, rutrum at, tempor non, tincidunt quis, mauris. Nullam eu nisi. In leo justo, rhoncus sed, mattis in, varius id, justo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec vel ligula et arcu bibendum porta
</td>
    <td width="100" height="200">5</td>
</tr>
<tr>
    <td>3</td>
    <td>6</td>
</tr>
<tr>
    <td colspan="3">7</td>
</tr>
</table>

[crisp]

De mooiste oplossing is om gewoon geen tables voor layout te misbruiken

[Beuker]

crisp schreef op dinsdag 10 juni 2008 @ 22:11:
De mooiste oplossing is om gewoon geen tables voor layout te misbruiken

Tja dat is wel erg makkelijk te roepen. Heb je dan geen alternatief. Ik wil best wat leren, maar dan graag een richting?

[Onbekend]

Even snel gekeken zie ik dat je op de derde regel maar 2 kolommen vult, terwijl de overige regels meer kolommen hebben.
Wellicht kan je daar wat gaan proberen met colspan.

Edit: I.p.v. tables kan je beter <div> gebruiken. Gebruik dan css voor je opmaak.

[ Voor 19% gewijzigd door Onbekend op 10-06-2008 22:18 ]

[Gomez12]

Waardoor je je in een spaghetti web met workarounds etc van css gaat begeven...

Tables zijn niet bedoeld voor je layout ok, maar om nou bij een table vraag gelijk naar een css oplossing te wijzen dat vind ik niet echt een antwoord op de vraag, het is syntactisch beter.
Maar imho is het zeker geen antwoord op de vraag, je verlegt het probleem alleen maar.

CSS is ook niet echt perfect als je ook IE6 wilt ondersteunen.

[crisp]

DJ_Flowerz schreef op dinsdag 10 juni 2008 @ 22:15:
[...]


Tja dat is wel erg makkelijk te roepen. Heb je dan geen alternatief. Ik wil best wat leren, maar dan graag een richting?

De enige manier om dit mbv tabellen consistent tussen browsers goed te krijgen is met nested tables. colspans en rowspans zijn iig dodelijk voor de precisie. Table-layout rendering is per spec niet precies dus sowieso heb je geen enkele garantie voor de toekomst.

Zoals Onbekend al opmerkt kan je beter naar voorbeelden kijken die CSS gebruiken voor layout. Dit lijkt me gewoon een simpele 3-koloms layout die makkelijk met CSS (en zonder noemenswaardige browser-issues) te realiseren is...

[ Voor 3% gewijzigd door crisp op 10-06-2008 22:27 ]

[PeterSelie]

Gomez12 schreef op dinsdag 10 juni 2008 @ 22:23:
CSS is ook niet echt perfect als je ook IE6 wilt ondersteunen.

Bij een volledig correcte toepassing van CSS2 en minimale aanpassingen is een dergelijk design met divs / CSS een stuk makkelijker in elkaar te zetten en zich daarbij een stuk beter gedraagt bij aanpassingen in bijvoorbeeld hoogte, breedte of toevoeging van content.

Van verplaatsen van het probleem is hier echter geen sprake, evenals er hier geen antwoord gegeven zou worden.
Dat het alleen syntactisch beter zou zijn is natuurlijk ook de rijnste kolder.. Een design in divs / CSS is nu eenmaal een stuk makkelijker te onderhouden en een stuk dynamischer.

[Onbekend]

Gomez12 schreef op dinsdag 10 juni 2008 @ 22:23:
Waardoor je je in een spaghetti web met workarounds etc van css gaat begeven...

Tables zijn niet bedoeld voor je layout ok, maar om nou bij een table vraag gelijk naar een css oplossing te wijzen dat vind ik niet echt een antwoord op de vraag, het is syntactisch beter.
Maar imho is het zeker geen antwoord op de vraag, je verlegt het probleem alleen maar.

CSS is ook niet echt perfect als je ook IE6 wilt ondersteunen.

Ik wilde er mee zeggen dat je de visuele verschillen tussen tables en divs met css kan opvangen.

(Uiteindelijk is het natuurlijk de bedoeling dat de TS probleemloos HTML 4.01 strict kan schrijven met CSS als enige opmaakmethode. Maar het vervangen van tabellen door divs is al een flinke stap in de goede richting. )

[Gomez12]

SoaDmaggot schreef op dinsdag 10 juni 2008 @ 22:29:
[...]

Bij een volledig correcte toepassing van CSS2 en minimale aanpassingen is een dergelijk design met divs / CSS een stuk makkelijker in elkaar te zetten en zich daarbij een stuk beter gedraagt bij aanpassingen in bijvoorbeeld hoogte, breedte of toevoeging van content.

Van verplaatsen van het probleem is hier echter geen sprake, evenals er hier geen antwoord gegeven zou worden.
Dat het alleen syntactisch beter zou zijn is natuurlijk ook de rijnste kolder.. Een design in divs / CSS is nu eenmaal een stuk makkelijker te onderhouden en een stuk dynamischer.

Ik zei toch IE6, maar als jij zo begint sinds wanneer is bijv IE7 volledig correct qua CSS2? Of FF of Opera?
AFAIK is er tot op dit moment nog geen enkele browser met een volledig correcte CSS2 toepassing, je hebt er die een bagger implementatie hebben ( IE6 / 7 ) en je hebt er die het beter doen ( basically de rest ) maar een volledig correcte implementatie?

Zolang er nog steeds IE hacks nodig zijn en je nog niet met css gewerkt hebt dan begeef je je imho toch echt in een wespennest.

Dynamischer is bij css imho juist meer een modewoord, 90% van de sites die ik dagelijks gebruik heeft een redelijk statische layout die gewoon met tables te bereiken is.

Ik vind css ook makkelijker dan tables, maar imho is het toch vooral semantisch / syntactisch beter, als jij wel ervaring hebt met tables en niet met css dan zou ik voor een belangrijke layout met een deadline toch aanraden dat jij tables gebruikt.
Css leer je niet even in 2 dagen goed te gebruiken. Dan krijg je absolute positioning etc.

[Beuker]

Hmm ik begrijp goed als ik zeg dat ik wel even bezig ben met om het table verhaaltje naar een div/css verhaal?

Weten jullie toevallig dan ook een leuke handige turtorial?

[Onbekend]

DJ_Flowerz schreef op dinsdag 10 juni 2008 @ 22:42:
Hmm ik begrijp goed als ik zeg dat ik wel even bezig ben met om het table verhaaltje naar een div/css verhaal?

Weten jullie toevallig dan ook een leuke handige turtorial?

http://www.w3schools.com/
Linksboven staan de Tutorials. Dat is eigenlijk om de basis te kennen.
Verder heb je bijvoorbeeld websites zoals http://www.gigadesign.be/2006/03/faux-columns-maken/ waarin handige tips en trucs worden behandeld.

[crisp]

Gomez12 schreef op dinsdag 10 juni 2008 @ 22:39:
[...]

Ik vind css ook makkelijker dan tables, maar imho is het toch vooral semantisch / syntactisch beter, als jij wel ervaring hebt met tables en niet met css dan zou ik voor een belangrijke layout met een deadline toch aanraden dat jij tables gebruikt.
Css leer je niet even in 2 dagen goed te gebruiken. Dan krijg je absolute positioning etc.

Als je ook nog niet de handigheden kent om met tables een dergelijk design pixelprecies op te zetten dan lijkt het me toch verstandiger je nu te gaan verdiepen in CSS dan in old-school table design waar je ook moet leren wanneer je spacer gifjes nodig hebt en tables moet gaan nesten

En verder is dit zoals gezegd met CSS prima te doen, ook in IE6. Het is een fixed-width, non-fixed height 3 kolom-layout met een header en footer. Eventueel nog faux columns maar dat kan ik zo niet opmaken uit het voorbeeld...

[Gomez12]

crisp schreef op dinsdag 10 juni 2008 @ 22:49:
[...]
Eventueel nog faux columns maar dat kan ik zo niet opmaken uit het voorbeeld...

Wederom een goed voorbeeld van het gemak van css. De termen die aan dingen gegeven worden zijn zo 1-2-3 te bedenken en gelijk te googlen.

Wie heeft er ooit eens een term als faux columns bedacht? Als ik dit nu op google zou zoeken heb ik meer kans als ik zoek naar table-layouts en alternatieven dan dat ik zo'n term bedenk...

[planB]

Als je toch tables wilt gebruiken:

Probeer eens: style="table-layout: fixed;" in je table tag.
(zie CSS definitie)

[Verwijderd]

Het grootste gevaar van zulke termen is dat de achterliggende gedachte zou kunnen zijn dat het principe alleen is om kolommen mee te maken. Het idee is eigenlijk meer dat niet alles is wat het lijkt. Een lijntje hoeft geen border te zijn. Het mag ook gerust een achtergrondplaatje zijn.

Ik denk altijd maar: stel dat iets een gebogen lijn is, dan moet het wel met een achtergrondplaatje, want met alleen CSS krijg je dat niet voor elkaar. En dat is de knop die je moet omzetten. Plaatjes voor layout zijn prima. Ook als het om een lijntje of een vlak gaat. Mensen die anders beweren snappen gewoon echt niets van stylesheets en de scheiding tussen markup en layout.

Maar goed, het zoeken naar stof over "faux columns" is wel een goed startpunt om tot een beter begrip te komen van hoe je layouts tot stand kunt brengen.

[crisp]

Gomez12 schreef op dinsdag 10 juni 2008 @ 22:58:
[...]

Wederom een goed voorbeeld van het gemak van css. De termen die aan dingen gegeven worden zijn zo 1-2-3 te bedenken en gelijk te googlen.

Wie heeft er ooit eens een term als faux columns bedacht? Als ik dit nu op google zou zoeken heb ik meer kans als ik zoek naar table-layouts en alternatieven dan dat ik zo'n term bedenk...

Als je je verdiept in webdesign en dingen gaat lezen op internet dan is de kans toch groot dat je die term al vrij snel tegenkomt, hij komt hier in WEB ook bijna dagelijks voorbij...

[ Voor 4% gewijzigd door crisp op 10-06-2008 23:14 ]

[Gomez12]

crisp schreef op dinsdag 10 juni 2008 @ 23:14:
[...]

Als je je verdiept in webdesign en dingen gaat lezen op internet dan is de kans toch groot dat je die term al vrij snel tegenkomt, hij komt hier in WEB ook bijna dagelijks voorbij...

Dat bedoel ik dus, dat kost tijd.
Css is dus niet iets wat je even in 2 dagen oppikt als je wel al een table-layout kan maken.

Als je tegen een deadline aan zit te werken dan zou ik toch echt aanraden table-layout als je daar wel goed in bent ( maar ja je vorige opmerking klopte wel, als je het in table layout ook niet zonder vragen voor elkaar kunt krijgen dan heb je toch iets te leren, leer dan gelijk het goede ( css ) )

[Verwijderd]

Ik vind het niet echt meer te verdedigen als iemand "het altijd zo heeft gedaan". Dat had je in 2001/2002 nog wel een beetje. Als je in 2008 nog table layouts gewend bent, heb je 6 jaar onden een steen gelegen.

Het hokjesdenken is overigens menselijk. Ik denk dat de meeste mensen er helemaal geen aanleg voor hebben om out of the box te denken.

[Beuker]

Verwijderd schreef op woensdag 11 juni 2008 @ 07:52:
Ik vind het niet echt meer te verdedigen als iemand "het altijd zo heeft gedaan". Dat had je in 2001/2002 nog wel een beetje. Als je in 2008 nog table layouts gewend bent, heb je 6 jaar onden een steen gelegen.

Het hokjesdenken is overigens menselijk. Ik denk dat de meeste mensen er helemaal geen aanleg voor hebben om out of the box te denken.

En bedankt! :-)

Het is inderdaad 6 jaar geleden dat ik iets met websites heb gedaan.