[css] probleem met spatie tussen cells (Opera/Mozilla vs IE)

[mahi]

Hier ben ik weer met het volgende probleem

Met wat CSS en HTML heb ik een leuk tabelletje gemaakt. Echter, in Internet Explorer wordt het tabelletje niet correct weergegeven terwijl Opera, Mozilla (en Netscape 6+) het wel juist weergeven. De HTML code is:

code:

<table class='table-blue'>
  <tr>
    <td class='table-blue-cell'><b>Test header</b></td>
  </tr>
  <tr>
    <td class='table-blue-cell'>Zinloze bladvulling om
 de layout te kunnen bekijken.</td>
  </tr>
</table>

Dit geeft onderstaand resultaat:



Zoals je kan zien verschilt de weergave tussen de verschillende browsers. maar waarom? Waarschijnlijk een foutje in de CSS, maar ik zie niet in waar. De breedte van de tabel moet 160 pixels zijn, maar Internet Explorer maakt er 156 van. Daarnaast is er ook een 2 pixel brede spatie tussen de cellen. Ik wil dat de cellen aangrenzend zijn (zoals Opera correct weergeeft).

"border-collapse : collapse;" kan ik dus niet gebruiken omdat dan de randen over elkaar komen te liggen. Overigens als ik "border-collapse : collapse;" erbij zet dan is de weergave in Internet explorer identiek aan die van Opera en Mozilla. Het lijkt er dus op dat Internet Explorer ergens een afwijkende standaard property heeft die niet in m'n stylesheet staat. maar welke?

De gebruikte CSS is:

code:

.table-blue {
 table-layout    : fixed;
 border-spacing  : 0px;
 margin          : 0px;
 width           : 160px;
}
.table-blue-cell {
 background-image   : url(table-cell.png);
 border-style       : solid;
 border-width       : 1px;
 border-left-color  : #ccffff;
 border-top-color   : #ccffff;
 border-right-color : #99ccff;
 border-bottom-color: #99ccff;
 font-family        : Verdana, Tahoma, Geneva,
    Arial, Helvetica, sans-serif;
 font-size          : 8pt;
 background-color   : #ffffff;
 color              : #000000;
 padding            : 5px;
}

[ Voor 0% gewijzigd door mahi op 25-10-2002 01:02 . Reden: kleine aanpassing zodat de layout van GoT niet verknoeid wordt ]

[porn*]

Heb je wel cellspacing=0 opgenomen in de HTML-tag van de table?

Of de table eventueel een stijl geven, en in de stijl de spacing op 0 zetten.

[Verwijderd]

porn schreef op 25 oktober 2002 @ 01:05:
Heb je wel cellspacing=0 opgenomen in de HTML-tag van de table?

Of de table eventueel een stijl geven, en in de stijl de spacing op 0 zetten.

border-spacing is het CSS equivalent voor cellspacing. Internet Explorer heeft er volgens mij alleen problemen mee (ondersteunt het niet geloof ik, ik heb er ook eens mee gestoeid).
Topicstarter, je kunt in één keer je probleem de wereld uithelpen door in de CSS voor je table border-collapse: collapse; te zetten

[crisp]

box-model verschil tussen IE en Mozilla: IE rekent de border mee met de width en height; Mozilla niet. Mag hier echter geen verschil opleveren aangezien je de width op de table zet, en niet op de td waar je wel de border zet.
Echter geef je zelf al de oplossing aan: border-collapse: collapse lost de margin tussen de td's op in dit geval. Het kan best zijn dat die margin in Mozilla default 0 is en in IE default 2px. IE zuigt wel meer wb het ondersteunen van standaarden...

[mahi]

Als ik "border-collapse: collapse;" gebruik dan komen de randen overeen te liggen wat niet de bedoeling is. Iedere cel moet een rand van 1 pixel dik hebben. De boven- en linkerkant zijn lichtblauw en de onder- en rechterkant zijn donkerblauw. De achtergrondafbeelding is een blauwe fading. Zo krijg je een zeer licht 3d-effect (zoals de afbeelding in de originele post toont). Als de border collapsed is dan is de rand tussen 2 cellen in plaats van 2 pixels breed (1 pixel lichtblauw en 1 pixel donkerblauw), slechts 1 pixel breed. Dat is niet wat ik wil.

Om duidelijk te maken wat ik bedoel heb ik de afbeelding uit het eerste bericht aangepast met hoe een collapsed border er uit ziet.

[crisp]

IE ondersteund het gebruik van border-spacing inderdaad nog niet; blijft dus over cellspacing=0 aan je <table> tag toevoegen...

[Verwijderd]

Ik moet nu toch even gaan zeuren...

Waarom gebruik je dan een tabel voor zoiets als 2 celletjes boven elkaar? Tabellen zijn er om data in rijen en kolommen weer te geven, niet voor positionering, en layout-technische dingen waar je dus helemaal geen tabel voor nodig hebt.

Mijn voorstel is:

code:

<div class="panel">
  <h1>Test header</h1>
  <p>Zinloze bladvulling om de layout te kunnen bekijken.</p>
</div>

Vervolgens maak je wat stylesheet rules:

code:

div.panel
{
  /* breedte, positionering */
}

div.panel h1
{
  /* tekstgrootte, vetgedrukt, lettertype, borders */
}

div.panel p
{
  /* tekstgrootte, lettertype, borders, eventueel uitlijning */
}

Of je structuur moet natuurlijk rijen en kolommen vereisen, maar dat lijkt me niet zo, aangezien het om tekst gaat.
Ik vind het hier echt fout om een tabel gebruiken, en vind het dus ook helemaal niet vreemd dat je tegen problemen aanloopt.

[crisp]

Ik ben het inderdaad ook wel eens met Cheatah; het is zelfs een stuk eenvoudiger:

HTML:

<div class='table-blue-cell'><b>Test header</b></div>
<div class='table-blue-cell'>Zinloze bladvulling om de layout te kunnen bekijken.</div>

moet je alleen nog even de width: 160px aan de class 'table-blue-cell' toevoegen (en eventueel een andere naam geven).

[Verwijderd]

Maar op die manier moet je moeilijk doen qua positionering. Overigens is het gebruik van de <b> tag imho net zo fout als een <font> tag

Jouw tags beschrijven ook helemaal niet wat voor gegevens ze bevatten, een tekst-browser, of browser zonder stylesheet ondersteuning zal er helemaal niets van bakken

[crisp]

Verwijderd schreef op 25 oktober 2002 @ 12:35:
Maar op die manier moet je moeilijk doen qua positionering. Overigens is het gebruik van de <b> tag imho net zo fout als een <font> tag

Jouw tags beschrijven ook helemaal niet wat voor gegevens ze bevatten, een tekst-browser, of browser zonder stylesheet ondersteuning zal er helemaal niets van bakken

Was ook maar ff een snel voorbeeldje om te laten zien dat het er precies zo uitziet als dat er bedoeld wordt; inderdaad duidelijke class-namen en een omspannend positioneringsblok maken het af

[mahi]

Waw, ik leer elke dag bij.

God bless GoT

Dat idee om div te gebruiken ipv een table is inderdaad veel beter. Stom dat ik er zelf niet op ben gekomen want ik had nog maar pas een vraag gesteld waar het antwoord ook div was. Het gebruik van tables zit gewoon verankerd vrees ik

Anyway, bedankt iedereen in deze thread!