Results 1 to 13 of 13

Thread: Firefox verpest mijn tabel

  1. #1
    Ex-Student
    Join Date
    Feb 2004
    Location
    Leeuwarden
    Posts
    2,409

    Angry Firefox verpest mijn tabel

    Volgende url:

    http://cornelis.dyndns.org/test.html

    In IE (maxthon) ziet deze testtabel er perfect uit. In FF daarentegen is de zwarte Cell rechts naast de cell met de inhoud: "blaablaat1" (test gegevens he ) even breed als de cell links terwijl dit niet zo in de code staat. De code kwam door de w3-validator (Tentatively passed validation) net als de CSS die in de code verwerkt is dus mijn vraag is, wat gaat er fout?

  2. #2
    Wanneer je de tabel een vaste breedte geeft bijvoorbeeld 7x60 = 420 dan werkt het in FireFox ook. (Hierbij moet je de eerste kolom en de randen van 1 pixel nog meerekenen).

    Succes
    Onmogelijk... Is geen feit, maar een mening.

  3. #3
    Ex-Student
    Join Date
    Feb 2004
    Location
    Leeuwarden
    Posts
    2,409
    Ik heb je advies opgevolgd en de table een vaste width gegeven. Ik heb de borders voor het gemak uitgezet zodat ik daar in eerste instantie geen rekening mee hoef te houden. ik heb enkele cellen die 60 px breed zijn en dubbele cellen die 120 px breed zijn. Per rij komt er een som uit van 600 px (10 x 60). De hoogte is 4 x 60 px = 240 px. Deze 2 eigenschappen heb ik weer in de CSS geplaatst maar het resultaat is eerder slechter dan beter geworden :S. De tabel wordt smaller gemaakt en de cel met blaablaat1 en de cel daarnaast zijn beide verdeeld ingekort. Verder is de code nog steeds "Tentatively passed validation" volgens w3 en voor de CSS file is het resultaat: "Geen fout of waarschuwing gevonden", Dus mijn conclusie en mening luidt, Firefox kan gewoon niet met simpele tabellen omgaan en is daarom een browser dat gewoonweg niet deugt.

  4. #4
    Wanneer je internetpagina's maakt voor het weergeven in meerdere browsers als IE, FireFox en Opera dan zou ik de validators maar vergeten. Ik snap dat ik nu een hoop kritiek ga ontvangen maar deze kritiek kan beter naar de ontwikkelaars van de diverse browser gezonden worden.

    De 'width' heb ik de tabel gezet en niet in / als CSS. Bekijk onderstaand eens:

    Code:
    <!DOCTYPE HTML SYSTEM> 
      <head>
        <title>test table/pyramid</title>
        <style tye="text/css">
    td.small
    {
      width: 60px;
      height: 60px;
    }
    
    td.big
    {
      width: 120px;
      height: 60px;
      text-align: center;
    }
        </style>
      </head>
    <body>
    <table border="1" cellspacing="0" cellpadding="0" bgcolor="black" width="420">
      <tr>
        <td>1</td>
        <td class="small">x</td>
        <td class="small">x</td>
        <td class="small">x</td>
        <td class="big" colspan="2" bgcolor="#FFD700">blaablaat1</td>
        <td class="small">x</td>
        <td class="small">x</td>
        <td class="small">x</td>
      </tr>
      <tr>
        <td>2</td>
        <td class="small">x</td>
        <td class="small">x</td>
        <td class="big" colspan="2" bgcolor="#C0C0C0">blaablaat2</td>
        <td class="big" colspan="2" bgcolor="#C0C0C0">blaablaat3</td>
        <td class="small">x</td>
        <td class="small">x</td>
      </tr>
      <tr>
        <td>3</td>
        <td class="small">x</td>
        <td class="big" colspan="2" bgcolor="#8C7853">blaablaat4</td>
        <td class="big" colspan="2" bgcolor="#8C7853">blaablaat5</td>
        <td class="big" colspan="2" bgcolor="#8C7853">blaablaat6</td>
        <td class="small">x</td>
      </tr>
      <tr>
        <td>4</td>
        <td class="big" colspan="2" bgcolor="#FF4500">blaablaat7</td>
        <td class="big" colspan="2" bgcolor="#FFFF00">blaablaat8</td>
        <td class="big" colspan="2" bgcolor="#FF4500">blaablaat9</td>
        <td class="big" colspan="2" bgcolor="#FFFF00">blaablaat10</td> 
      </tr>
    </table>       
    </body>
    </html>
    Succes.
    Onmogelijk... Is geen feit, maar een mening.

  5. #5
    Ex-Student
    Join Date
    Feb 2004
    Location
    Leeuwarden
    Posts
    2,409
    Wil niet vervelend doen, maar ik zie geen verschil. En het kan ook niet zijn dat ik me erop verkijk of zo, want als ik met paint ga kijken (lijntje trekken langs de breedtes van de cellen) dan is het resultaat zoals ik hier telkens uitleg. Ook kan het niet zo zijn dat het aan de versie ligt van FF, dat die te oud is want mijn FF heb ik gisteren upgedate en de huidige versie is nu Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.0.3) Gecko/20060426 Firefox/1.5.0.3

  6. #6
    In de bijlage een afdruk zoals het er bij mij uitziet in FF.

    Hoe zou het er uit moeten zien?
    Attached Thumbnails Attached Thumbnails Click image for larger version. 

Name:	Cornelis.PNG 
Views:	142 
Size:	56.2 KB 
ID:	3191  

  7. #7
    Ex-Student
    Join Date
    Feb 2004
    Location
    Leeuwarden
    Posts
    2,409
    Zie bijlage hoe het in IE, en dus correct, eruit zou moeten zien.

    Maar ik heb een (zielige) oplossing gevonden, die voor mij voldoet: http://cornelis.dyndns.org/testpethaticsolution.html. De bovenste rij kan (hoop ik) nog kleiner in de hoogte, maar dan zou de piramide goed weergegeven worden, ook in FF.
    Last edited by Cornelis; 28-Feb-07 at 00:12.

  8. #8
    Ex-Student
    Join Date
    Feb 2004
    Location
    Leeuwarden
    Posts
    2,409
    na discussie met Benno, die zei dat mijn conclussie wat kort door de bocht was heb ik het ook met opera geprobeerd. Het resultaat: De weergave van opera komt met beide browsers, FF en IE niet overeen. In opera wordt de width van de eerste gekleurde cel (Blaablaat1) helemaal niet meegenomen of uitgevoerd. Begin me eigenlijk af te vragen of er wel een standaard is?
    Last edited by Cornelis; 28-Feb-07 at 00:12.

  9. #9
    Senior Member walterheck's Avatar
    Join Date
    Oct 2001
    Location
    Belo Horizonte, Brasil
    Posts
    4,212
    Ik denk dat ik je oplossing heb gevonden. Het geheim zit hem in je css. Als je "table-layout: fixed" toevoegt aan je table element wordt de tabel gerenderd puur op basis van de aangegeven breedtes, er wordt dan geen rekening meer gehouden met de inhoud van de cellen. (zie voor meer info paragraaf 17.5.2: w3 specificatie).
    je code wordt dan:
    Code:
    <!DOCTYPE HTML SYSTEM> 
      <head>
        <title>test table/pyramid</title>
        <style type="text/css">
    table
    {
      table-layout: fixed;
      width: 420px;
    }
    td.small
    {
      width: 60px;
      height: 60px;
    }
    
    td.big
    {
      width: 120px;
      height: 60px;
      text-align: center;
    }
        </style>
      </head>
    <body>
    <table border="1" cellspacing="0" cellpadding="0" bgcolor="white">
      <tr>
        <td class="small">x</td>
        <td class="small">x</td>
        <td class="small">x</td>
        <td class="big" colspan="2" bgcolor="#FFD700">blaablaat1</td>
        <td class="small">x</td>
        <td class="small">x</td>
        <td class="small">x</td>
      </tr>
      <tr>
        <td class="small">x</td>
        <td class="small">x</td>
        <td class="big" colspan="2" bgcolor="#C0C0C0">blaablaat2</td>
        <td class="big" colspan="2" bgcolor="#C0C0C0">blaablaat3</td>
        <td class="small">x</td>
        <td class="small">x</td>
      </tr>
      <tr>
        <td class="small">x</td>
        <td class="big" colspan="2" bgcolor="#8C7853">blaablaat4</td>
        <td class="big" colspan="2" bgcolor="#8C7853">blaablaat5</td>
        <td class="big" colspan="2" bgcolor="#8C7853">blaablaat6</td>
        <td class="small">x</td>
      </tr>
      <tr>
        <td class="big" colspan="2" bgcolor="#FF4500">blaablaat7</td>
        <td class="big" colspan="2" bgcolor="#FFFF00">blaablaat8</td>
        <td class="big" colspan="2" bgcolor="#FF4500">blaablaat9</td>
        <td class="big" colspan="2" bgcolor="#FFFF00">blaablaat10</td> 
      </tr>
    </table>       
    </body>
    </html>
    Ik heb dit getest in FF en IE en het lijkt te werken (geen opera voor handen).
    Nee, de Romeinen spraken geen ISO-8859-1 LATIN

  10. #10
    Senior Member walterheck's Avatar
    Join Date
    Oct 2001
    Location
    Belo Horizonte, Brasil
    Posts
    4,212
    Oh ja, en ik heb al vaker gelezen dat je beter geen tables kan gebruiken. Probeer hetzelfde maar eens voor elkaar te krijgen met div-jes en css.
    Warning: hardcore css-lessons ahead
    Nee, de Romeinen spraken geen ISO-8859-1 LATIN

  11. #11
    Ex-Student
    Join Date
    Feb 2004
    Location
    Leeuwarden
    Posts
    2,409
    Idd, zowel onder FF als onder Opera wordt het ook goed weergegeven.

    bedankt

  12. #12
    Quote Originally Posted by PiSymbol
    Wanneer je internetpagina's maakt voor het weergeven in meerdere browsers als IE, FireFox en Opera dan zou ik de validators maar vergeten. Ik snap dat ik nu een hoop kritiek ga ontvangen maar deze kritiek kan beter naar de ontwikkelaars van de diverse browser gezonden worden.
    Daar ben ik het niet mee eens. Stap een is valide code. Daar helpt een validator bij. Stap twee is het er goed uit laten zien in verschillende browsers. Als dat niet lukt weet je tenminste wie je de schuld moet geven

  13. #13
    Senior Member Mark-io's Avatar
    Join Date
    Apr 2006
    Location
    midden vh land
    Posts
    254
    probleem zit 'm in de default style sheets die iedere browser hanteert. CSS is immers cascading dus je overerft alles wat in een "hogere" stylesheet wordt gedefinieerd en niet specifiek in een onderliggende stylesheet wordt overruled.
    zoals in dit geval de table layout properties. overigens ziet het voorbeeld er bij mij identiek uit in IE en Firefox...
    Actually, there is something more dangerous than a little knowledge: a lot of ignorance.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •