[CSS-IE-Mozilla] vreemd gedrag (of niet) bij mozilla.

[Michali]

Ik heb in mijn poging om een site te maken zonder het gebruik van tabellen een probleempje in mozilla gevonden.

Ik gebruik nu de css float property om verschillende divs naast elkaar te kunnen zetten om zo een tabel te immiteren (gewoon om uit te proberen, ik ga het ook nodig hebben zo).

nu doe ik dat op deze manier:

code:

<div style="width: 126px; border: 1px solid black; padding: 2px;">
    <div>
        <div style="width: 40px; float: left; border: 1px solid black;" align="center">
            a
        </div>
        <div style="width: 40px; float: left; border: 1px solid black;" align="center">
            b
        </div>
        <div style="width: 40px; float: left; border: 1px solid black;" align="center">
            c
        </div>
    </div>
    <div>
        <div style="width: 40px; float: left; border: 1px solid black;" align="center">
            d
        </div>
        <div style="width: 40px; float: left; border: 1px solid black;" align="center">
            e
        </div>
        <div style="width: 40px; float: left; border: 1px solid black;" align="center">
            f
        </div>
    </div>
</div>

_{hoe krijg ik die html goed?}

In IE is het resultaat zoals ik zou verwachten. 2 rijen met 3 kolommen met daarom heen een border en nog een border om alle kolommen (op een afstand van 2 pixels)

Het resultaat in Mozilla echter is niet echt wat ik wil. De kolommen zijn wel op de juiste plek, maar zweven boven de buitenste div.



Dit is de eerste keer dat ik het op deze manier probeer, ik sta dus volledig open voor oplossingen die veel beter zijn dan deze (maar geen tabellen, wel met css dus).

[Kix@$$]

Waarom maak je er geen tabel van dan, maar allemaal verschillende divjes

[Verwijderd]

Floating elementen hebben geen hoogte.
Voeg een clearing element (clear:both|left|right;) toe achter de floatende elementen.
http://www.w3.org/TR/CSS21/visuren.html#propdef-clear

Je kunt overigens (in niet-IE browsers) ook gebruik maken van display:table;

code:

<div style="display:table;">
    <div style="display:table-row;">
        <div style="display:table-cell;">aaa</div>
        <div style="display:table-cell;">bbb</div>
    </div>
    <div style="display:table-row;">
        <div style="display:table-cell;">ccc</div>
        <div style="display:table-cell;">ddd</div>
    </div>
</div>

[ Voor 51% gewijzigd door Verwijderd op 31-10-2003 12:19 ]

[Michali]

Ik heb laatst wel veel gelezen over dit soort technieken (pagina's maken zonder ook maar 1 tabel te gebruiken) en het leek me wel een uitdaging om dat ook eens te proberen. Zeker om mijn css kennis eens wat uit te bereiden maar ook gedrag van verschillende browser een te zien.

Ok ik heb nu dit:

code:

<div style="width: 126px; border: 1px solid black; padding: 2px;">
    <div>
        <div style="width: 40px; float: left; border: 1px solid black;" align="center">
            a
        </div>
        <div style="width: 40px; float: left; border: 1px solid black;" align="center">
            b
        </div>
        <div style="width: 40px; float: left; border: 1px solid black;" align="center">
            c
        </div>
        <div style="clear: right;"></div>
    </div>
    <div>
        <div style="width: 40px; float: left; border: 1px solid black;" align="center">
            d
        </div>
        <div style="width: 40px; float: left; border: 1px solid black;" align="center">
            e
        </div>
        <div style="width: 40px; float: left; clear: right; border: 1px solid black;" align="center">
            f
        </div>
        <div style="clear: right;"></div>
    </div>
</div>

Nog steeds hetzelfde probleem.

[ Voor 82% gewijzigd door Michali op 31-10-2003 12:26 . Reden: php tags zijn atm leesbaarder ;) ]

[Michali]

Verwijderd schreef op 31 oktober 2003 @ 12:17:
Je kunt overigens (in niet-IE browsers) ook gebruik maken van display:table;

code:

<div style="display:table;">
    <div style="display:table-row;">
        <div style="display:table-cell;">aaa</div>
        <div style="display:table-cell;">bbb</div>
    </div>
    <div style="display:table-row;">
        <div style="display:table-cell;">ccc</div>
        <div style="display:table-cell;">ddd</div>
    </div>
</div>

Dan kan ik net zo goed gelijk gebruik gaan maken van table's.

[Verwijderd]

Michali schreef op 31 oktober 2003 @ 12:28:
Dan kan ik net zo goed gelijk gebruik gaan maken van table's.

Nee, dan snap je het verschil tussen semantiek en presentatie nog niet.

Wat je met TABLE tags zegt is: "deze data is tabulair". Je doet een uitspraak over de betekenis van de data! Als de data dat niet is gebruik je de tag dus op een verkeerde manier.

Met CSS display:table zeg je niks over de data, alleen over hoe het gepresenteerd moet worden! De structuur en semantiek van de data blijft ongewijzigd.

[Michali]

Verwijderd schreef op 31 oktober 2003 @ 13:25:
[...]

Nee, dan snap je het verschil tussen semantiek en presentatie nog niet.

Wat je met TABLE tags zegt is: "deze data is tabulair". Je doet een uitspraak over de betekenis van de data! Als de data dat niet is gebruik je de tag dus op een verkeerde manier.

Met CSS display:table zeg je niks over de data, alleen over hoe het gepresenteerd moet worden! De structuur en semantiek van de data blijft ongewijzigd.

Nee, dat bedoelde ik niet. Ik zei dat ik eens wilde proberen een pagina te maken zonder gebruik te maken van table's. Als ik dan dit ga gebruiken kan ik net zo goed table's gebruiken. Verder ben ik het niet eens met wat je zegt. Ik vind dat beide manieren hetzelfde zijn alleen op een andere manier. Als het is zoals jij zegt dan worden table's eigenlijk zo goed als altijd misbruikt. (wat mischien ook wel zo is maar het is wel een erg fijne manier van object plaatsten in je pagina (als je css niet zo goed kent dus)).

[CrashOne]

Michali schreef op 31 oktober 2003 @ 14:43:
[...]


Nee, dat bedoelde ik niet. Ik zei dat ik eens wilde proberen een pagina te maken zonder gebruik te maken van table's. Als ik dan dit ga gebruiken kan ik net zo goed table's gebruiken. Verder ben ik het niet eens met wat je zegt. Ik vind dat beide manieren hetzelfde zijn alleen op een andere manier. Als het is zoals jij zegt dan worden table's eigenlijk zo goed als altijd misbruikt. (wat mischien ook wel zo is maar het is wel een erg fijne manier van object plaatsten in je pagina (als je css niet zo goed kent dus)).

Tabellen zijn voor het weergeven van data, css voor de opmaak.

Tabellen worden vaak misbruikt maar worden ook vaak gebruikt als css geen toereikende oplossing biedt.

[coubertin119]

Als je bedoeling was tabulaire data weer te geven zonder tabellen was je fout bezig, als je een lay-out in mekaar wou steken gebaseerd op de methodes van een tabel, moet je met die display: table aan de slag.

Dus, voor tabulaire data gebruik je tables. Voor een lay-out kàn je display: table gebruiken. Als je bedoeling was de tabulaire gegevens in divs te zetten ben je fout bezig.

[slm]

C:

<div style="width: 126px; height:auto; border: 1px solid black;padding: 2px;">
    <div>
        <div style="width: 40px; float: left; border: 1px solid black; text-align:center">
            a
        </div>
        <div style="width: 40px; float: left; border: 1px solid black; text-align:center">
            b
        </div>
        <div style="width: 40px; float: left; border: 1px solid black; text-align:center">
            c
        </div>
    </div>
    <div style="float:none;clear: both;"></div>
    <div>
        <div style="width: 40px; float: left; border: 1px solid black; text-align:center">
            d
        </div>
        <div style="width: 40px; float: left; border: 1px solid black; text-align:center">
            e
        </div>
        <div style="width: 40px; float: left; border: 1px solid black; text-align:center">
            f
        </div>
    </div>
    <div style="float:none;clear: both;"></div>
</div>

Toch begrijp ik het probleem van je met tabellen niet. Juist het voorbeeld dat je geeft met letters a t/m f is tabulaire data en daarvoor zijn - jawel - tabellen bedoeld. Alhoewel de code die hierboven heb gezet nu wel werkt, denk ik dat je gaat huilen zodra je multiple lines, plaatjes en allerlei andere zaken erin wilt gaan zetten en dat allemaal in elke browser hetzelfde eruit wil laten zien...

[creative8500]

1) Je vraagt om inzichten van anderen
2) Je krijgt inzichten van anderen
3) Je begrijpt de inzichten niet
4) Je krijgt de inzichten uitgelegd
5) Je begrijpt de inzichten, maar bent het oneens

Niks mis mee, normaalgesproken, maar wel in het geval van HTML. HTML is een set regels, en als je HTML wilt gebruiken wil je dus de set regels toepassen. Indien je met de regels oneens bent ga je naar de discussiefora van het W3, of schrijft zelf een DTD.

Nu kun je kiezen uit een van de volgende stappen:

6) Je wil HTML gebruiken, en wel met de regels van HTML
6) Je wil toch tabellen gebruiken wanneer je geen tabel wilt gebruiken.
6) Je wil jarenlang bezig zijn met het ontwikkelen van een mark-up-taal,
waarna iedereen zegt dat je het plaatje-element ook voor paragrafen mag gebruiken.

[Michali]

Dit weet ik allemaal wel. Ik wil alleen weten of het ook kan zonder tabellen. CSS is voor opmaak, html is ook nog steeds een opmaak taal. CSS kan alleen wat meer dus dat kun je echt niet wijsmaken.

Verder wil ik ook wel tabellen gebruiken. Normaal gesproken zou ik dit ook direct hebben gedaan maar zoals ik al zei is dit gewoon een soort van test/leerstof om het wat beter onder de knie te krijgen. Nu is er een antwoord gegeven dat het probleem al oplost. Dan is mijn doel toch bereikt?

[Verwijderd]

Michali schreef op 31 oktober 2003 @ 14:43:
Nee, dat bedoelde ik niet. Ik zei dat ik eens wilde proberen een pagina te maken zonder gebruik te maken van table's. Als ik dan dit ga gebruiken kan ik net zo goed table's gebruiken.

Behalve dat tabellen de betekenis van je data beinvloeden.

(wat mischien ook wel zo is maar het is wel een erg fijne manier van object plaatsten in je pagina (als je css niet zo goed kent dus)).

Dat is ook zo! Daarom is die display:table uberhaupt in het leven geroepen!

De enige reden dat we met z'n allen met floats te lopen k*tten is dat display:table niet in IE werkt. Dus wat dat betreft moedig ik je pogingen absoluut aan!

[disjfa]

gewoon tabellen gebruiken als je het niet begrijpt of onlogisch vind om met divjes te werken moet je dat vooral niet doen

je groeit vanzelf in de regels van html en dan word je een even zeurderig persoon als iedereen hier over mensen die zoals jou htmllen

---

ah het is het oude box model verhaal

[ Voor 9% gewijzigd door disjfa op 31-10-2003 15:50 ]

[Michali]

Ik kan wel zeggen dat ik inmiddels wel veel weet over HTML. Ik ben bezig met een site hier op mijn stage en ik wil, gewoon om weer eens wat anders te doen en vooral om er wat van te leren de site maken zonder eens tabellen te gebruiken. Ik was wel begonnen met tabellen maar heb dit later toch veranderdt. Ik heb op een pagina bijvoorbeeld 12 geneste tabellen weten te reduceren naar 0. Het resultaat is er alleen maar beter op geworden. De laatste tabel echter, verdeelde de pagina in 3 delen. Het bovenste deel, een balk links en de content. Hierom heen zit een 1 pixel border. Dit lukt allemaal in IE wel alleen zweeft de hele pagina in mozilla nu boven die buitenste border. Ziet er niet echt te goed uit eigenlijk.

[slm]

Verwijderd schreef op 31 oktober 2003 @ 15:33:
De enige reden dat we met z'n allen met floats te lopen k*tten is dat display:table niet in IE werkt. Dus wat dat betreft moedig ik je pogingen absoluut aan!

Sinds wanneer werkt display:table niet in IE?? Wat werkt er niet van dan? En welke versie van IE bedoel je?

[Verwijderd]

hahaha omg dit klink bekend

Ik moedig jullie aan om een goed tutorial te bouwen!
Het is namelijk helemaal niet makkelijk om over te schakelen!

[ Voor 20% gewijzigd door Verwijderd op 31-10-2003 16:31 ]

[slm]

dit klinkt ook bekend: [rml]slm in "[ css] Floating divs gelijke hoogte geven"[/rml]

[disjfa]

Verwijderd schreef op 31 oktober 2003 @ 16:30:
Ik moedig jullie aan om een goed tutorial te bouwen!

maar daar zijn er al zat van...... waarom nog meer

het begin:
www.w3schools.com

interesant om te kijken:
www.glish.com/css

het probleem:
de htmller die dat niet weet

[Verwijderd]

slm schreef op 31 oktober 2003 @ 16:16:
Sinds wanneer werkt display:table niet in IE??

Sinds altijd

Wat werkt er niet van dan?

Volgens mij werkt er niks van. Wat werkt er volgens jou wel van?

Voor de duidelijkheid ik heb het over:

• display:table;
• display:table-row;
• display:table-cell;

http://www.w3.org/TR/CSS21/visuren.html#propdef-display

[slm]

Kijk eens in deze post : [rml]slm in "[ css] Floating divs gelijke hoogte geven"[/rml]

dit voorbeeld werkt ook in IE (heb het alleen in 6 getest dus vandaar dat ik vraag welke versie IE.

[disjfa]

moet je vooral niet op de floats letten

dat is dus zo gemaakt dat de floats in ie aangeslagen worden en de table-cell in mozilla

[mpegernie]

Michali schreef op 31 oktober 2003 @ 15:29:
Dit weet ik allemaal wel. Ik wil alleen weten of het ook kan zonder tabellen. CSS is voor opmaak, html is ook nog steeds een opmaak taal. CSS kan alleen wat meer dus dat kun je echt niet wijsmaken.

HTML is idd een opmaak taal (markup language), maar niet als in "lay-out" of "presentatie" wat jij bedoeld en waar CSS wel voor is. HTML is een manier om gegevens op te maken. De tags in HTML zeggen iets over de betekenis gegevens, de semantiek. <p> geeft aan, dit is een paragraaf, en zo kun je ook wat verzinnen bij <h1>, <a>, <label>, etc.
Deze tags zeggen eigenlijk nog niets over de weergave, alhoewel elke browser daar wel een id voor heeft en die weergave voor ons meestal ook vrij logisch is. Met CSS kun je deze weergave zelf bepalen.

Blues probeerde je dit verschil (tussen semantiek en presentatie) ook al uit te leggen. Lees anders zijn reacties nog even door.

Jou probleem: iets afbeelden als een table (wat dus de presentatie betreft en dus CSS). Daar heeft CSS display:table voor. Nu snap ik dat je het op een andere manier doet om daar wat van te leren, plus dat M$ display:table het heel leuk negeert, maar als je zegt dat <table> en display:table hetzelfde zijn zit je fout.

Sowieso denk ik dat als je echt CSS goed wilt gaan leren dat je dit goed moet begrijpen. Je bent met CSS immers bezig weergave van gegevens te scheiden.

ik hoop dat het verschil nu duidelijk is, suc6 ermee

handig:
http://www.glish.com/css/ (zoals al genoemd)
http://www.quirksmode.org/
http://www.brainjar.com/css/positioning/default.asp
http://www.thenoodleincid...als/box_lesson/boxes.html

_{ik zie dat je ook van mediatechnologie bent. vet om anderen ook met divjes bezig te zien}

[ Voor 19% gewijzigd door mpegernie op 01-11-2003 03:00 ]

[slm]

disjfa schreef op 31 oktober 2003 @ 17:24:
moet je vooral niet op de floats letten

dat is dus zo gemaakt dat de floats in ie aangeslagen worden en de table-cell in mozilla

Nu je het zegt... als ik die floats weghaal, werkt het niet meer in IE. Was me zelf nog niet eens opgevallen, vandaar mijn vraag waarom display:table niet zou werken in IE.

[Clay]

display:table doet op zich ook niet veel. Als je er geen row en cell displays in gebruikt verschilt table niet veel van block, en da's de standaard voor een div. vaandaar dat je het niet merkt.

[Michali]

Ik denk dat ik dan toch maar een table ga gebruiken voor dit probleem. Maar ik vind het nu wel vreemd dat als ik een indeling van mijn pagina wil zoals ik het nu heb, dat ik dan regels moet gaan breken (of misbruiken) om het te krijgen zoals ik wil. Ik heb ook die display:table getest en die doet het inderdaad niet (jammer). Ik zou het ook op kunnen lossen met een absolute position, maar ik wil de pagina altijd in het midden centeren en dus werkt dat hier niet echt lekker. Ik begin de voordeel van divjes wel erg te zien de laatste tijd maar ik merk wel dat tabellen dus in sommige situaties onmisbaar zijn (totdat IE eens wat fixed). Ik denk dat ik bij mijn volgende site bij het indelen van de pagina al van te voren hiermee rekening ga houden zodat ik geen regels hoef te misbruiken. (hoewel het 'eigenlijk' om het resultaat gaat vind ik het toch fijn om volgens de regels te werken, zeker omdat ik denk dat het resultaat in verschillende browsers dan ook beter te voorspellen is)

[creative8500]

Het is niet zo dat je regels breekt; je gebruik workarounds, en die zij niet 'evil'.
In elk geval zul je meer dichter bij perfectie komen, dan wanneer een ontoegankelijke, table-based, non-valid, veel-bandbreedte-kostende layout creëert.

[Michali]

Het aantal regels HTML code in de pagina die ik heb gemaakt is gedaalt tot zo'n 30% van wat het eerst was. Het is nu een stuk overzichtelijker en dat komt ook omdat ik zorgvuldig de namen voor de classes heb gekozen. En ik heb nu werkelijk alle opmaak in een apart bestand staan. Wat het nu ook wel erg makkelijk maakt om een site te skinnen oid. Ik had eigenlijk verwacht dat het een stuk moeilijker zou zijn om pagina's op deze manier op te bouwen maar eigenlijk scheelt het alleen maar tijd omdat ik geen vreemde truukjes hoef uit te halen met tabellen, minder regels html hoef te typen en de manier waarop het gepresenteert wordt (ik leer het wel ) nu makkelijk kan veranderen.