[XHTML] FireFox negeert cell

[Verwijderd]

Goedendag allemaal.

Ik gebruik voor m'n header / menu structuur een tabel, waar veel colspan en rowspan in voorkomt. Voor de eerste rij geldt dat de eerste cel 1 cel breed is, de 2e cel is 4 rijen hoog, de 3e cel is 3 cellen breed en de laatste cel is 4 rijen hoog.

Mijn tabel structuur:

code:

<table class="main" cols="6">
 
 <tr>
  <td class="spacer1a" colspan="1"></td>
  <td class="spacer2a" rowspan="4"></td>
  <td class="spacer1b" colspan="3"></td>
  <td class="spacer2b" rowspan="4"></td>
 </tr>
 
 <tr>
  <td rowspan="3"><a href="">[img]"images/header.gif"[/img]</a></td>
  <td><a href="">[img]"images/menu/zoek.gif"[/img]</a></td>
  <td><a href="">[img]"images/menu/profiel.gif"[/img]</a></td>
  <td><a href="">[img]"images/menu/faq.gif"[/img]</a></td>
 </tr>
 
 <tr>
  <td><a href="">[img]"images/menu/forum.gif"[/img]</a></td>
  <td><a href="">[img]"images/menu/chat.gif"[/img]</a></td>
  <td><a href="">[img]"images/menu/none.gif"[/img]</a></td>
 </tr>
 
 <tr>
  <td class="spacer3" colspan="3"></td>
 </tr>
</table>

de CSS:

code:

body
{
    margin: 0px;
}

table, tr, td, img
{
    padding: 0px;
    border-spacing: 0px;
    border-collapse: collapse;
    border: 0px solid black;
}

table.main
{
    width: 100%;
}

td.spacer1a, td.spacer1b
{
    background-image: url( "images/spacer1.gif" );
    width: 443px;
    height: 22px;
}

td.spacer1b
{
    width: 330px;
}

td.spacer2a
{
    background-image: url( "images/spacer2.gif" );
    width: 100%;
    height: 169px;
}

td.spacer2b
{
    width: 15px;
}

td.spacer3
{
    background-image: url( "images/spacer3.gif" );
    width: 339px;
    height: 57px;
}

Zoals de echte XHTML-er al kan zien, zit er in de table tag de attr cols, die eigenlijk niet gebruikt mag worden. Laat ik dit attr weg, dan verdwijnt de laatste cel van de eerste rij (spacer2b) in IE?! FireFox laat die laatste cell sowieso niet zien...

Hoe kan dit? En vooral, hoe kan ik wel de laatste cel (spacer2b) in zowel IE als FF laten zien (liefst valid XHTML)

Alvast bedankt

Roemer

Btw, m'n xhtml en css zijn valid

[simon]

Als je met xhtml werkt, kun je dan niet beter met divs werken, of met ul's/li's?

[SchizoDuckie]

je snapt de xHtml boodschap niet helemaal denk ik... Wat je nu aant doen bent is zeg maar de helft. (syntax)

Probeer even je site op te bouwen met nette de elementen die semantisch beschrijven wat je neerzet in een pagina. kortom:

Menu:

HTML:

<menu>
 <li><a>kwaak</a></li>
 <li><a>blaat</a></li>
</menu>

en voor bijv. je content area:

HTML:

<div class="content">
 
  <div class="artikel">
    <h1>titeltje</h1> 
    <p>kwaak blaat mekker</p>
  </div>

  <div> 
    <h1>titeltje2</h1> 
    <p>kwaak blaat</p>
  </div>

</div>

Zoals je aan deze code al gelijk kan zien is het 1 div class content met daarin 2 artikelen. Die artikelen hebben netjes een header en een paragraaf. Een zoekmachine snapt dat, een screen reader snapt dat, en je browser snapt dat.

Nu hoef je alleen nog maar deze content op te maken met alleen css, en hoef je nergens meer spacers te gebruiken.

[ Voor 29% gewijzigd door SchizoDuckie op 20-11-2004 18:29 ]

[Verwijderd]

Ik waardeer jullie tips over totale code veranderingen enzo wel, en ik weet dat jullie het goed bedoelen, maar dat is totaal niet wat ik wil weten / me afvraag.

Waar het om gaat is waarom 1 cell uit de tabel niet weergegeven wordt in IE en FF, en met een "not-valid" aanpassing alleen in IE.

[Verwijderd]

Ik begrijp wel dat je de tips waardeert, maar de xhtml code zoals jij die noemt slaat echt helemaal nergens op. Het is tag-soup. Hiervoor gebruik je gewoon geen xhtml.

Als je perse een table layout wilt kan je dan een plaatje posten van hoe je wilt dat het eruit ziet, want dat is me niet duidelijk uit je openingspost. Daarmee kunnen we je wel helpen, ook al is het gebruik ervan af te raden.

[Verwijderd]

Ik kan nu geen plaatjes posten, maar het probleem is dat de cell met de css-class "spacer2b" niet weer gegeven word.

edit:
hoop gepruts om tabel proberen te tekenen met ascii ...

[ Voor 59% gewijzigd door Verwijderd op 20-11-2004 20:27 ]

[Verwijderd]

Het probleem ligt hem denk ik meer in het feit dat jij met een verkeerde oplossing het probleem benadert. Namelijk met tabellen.

[Verwijderd]

Die cols attribute, dat lijkt een IE only attribuut te zijn. Die zou ik dus niet gaan gebruiken.
De selector td.spacer2a heeft width:100%;.
Als ik die weghaal, dan worden de andere cellen niet meer platgedrukt.
Ik zou wel een kleurtje geven aan de borders van je tabel cellen:
td{border:1px solid green;}
Dan is het wat makkelijker te volgen wat er gebeurt. Het is namelijk niet echt een simpele tabel.

[krvabo]

Verwijderd schreef op zaterdag 20 november 2004 @ 22:29:
Die cols attribute, dat lijkt een IE only attribuut te zijn. Die zou ik dus niet gaan gebruiken.

Volgens http://www.w3schools.com/xhtml/attr_td.asp is het een volledige valid attribute voor xhtml 1.0. Zowel in strict, transitional en frameset.

Hm, iets over het hoofd gezien, je hebt gelijk, cols in <table> mag niet volgens http://www.w3schools.com/xhtml/attr_table.asp, en in html 4.1 ook niet: http://www.w3schools.com/tags/tag_table.asp .

Hm,
rules: none,groups,rows,cols,all
Specifies the horizontal/vertical divider lines.
Note: Must be used in conjunction with the "border" attribute!

Maar dat zal wel iets anders doen

[ Voor 40% gewijzigd door krvabo op 21-11-2004 01:46 ]

[Ramon]

Verwijderd schreef op zaterdag 20 november 2004 @ 17:50:
Zoals de echte XHTML-er al kan zien, zit er in de table tag de attr cols, die eigenlijk niet gebruikt mag worden. Laat ik dit attr weg, dan verdwijnt de laatste cel van de eerste rij (spacer2b) in IE?! FireFox laat die laatste cell sowieso niet zien...

Dat komt omdat firefox een lege cel sowieso niet laat zien. Dit kan je oplossen door &nbsp; (spatie) in de cel te zetten

[krvabo]

Ramon de Jesus schreef op zondag 21 november 2004 @ 01:49:
[...]
Dat komt omdat firefox een lege cel sowieso niet laat zien. Dit kan je oplossen door &nbsp; (spatie) in de cel te zetten

Cascading Stylesheet:

table {
empty-cells: show;
}

gebruiken

[ Voor 4% gewijzigd door krvabo op 21-11-2004 02:17 ]

[Verwijderd]

Bedankt voor het meedenken!

Helaas werken beide oplossingen niet, met de & nbsp; en empty-cells: show;.

[ Voor 3% gewijzigd door Verwijderd op 21-11-2004 12:42 ]

[Michali]

Hier wordt de cell gewoon weergegeven dus ik zie het probleem niet zo. Post anders eens een screenshot?

[Verwijderd]

Cascading Stylesheet:

table, tr, td, img
{
    padding: 0px;
    border-spacing: 0px;
    border-collapse: collapse;
    border: 0px solid black;
}

Dit vind ik niet erg netjes, misschien beter om de juiste elementen de juiste styles te geven, dus:

Cascading Stylesheet:

table {
    border-spacing: 0px;
    border-collapse: collapse;
}

table, tr, td, img {
    padding: 0;
    border: none; /* beetje vreemd om in te stellen dat een border niet moet worden weergegeven en wél de kleur instellen */
}