Foute tabelweergave

Status
Niet open voor verdere reacties.
N

NIh1IlO

Gebruiker
Lid geworden
4 feb 2003
Berichten
759
Dag specialisten

Ik heb een tabelletje ontworpen waarvan de buitenrand 3p solid red is en alle andere celranden 1px dotted blue. De tabelborder is collapse.
Wanneer ik de tabel bekijk in 4 verschillende browsers (Chrome, IE, FF en Safari) dan geven enkel de browsers FF en Safari de tabel correct weer terwijl de browsers Chrome en IE enkele stukjes randen solid weergeven.
Het betreft het tabelletje dat hier kan geraadpleegd worden.
Wat doe ik verkeerd en hoe kan ervoor gezorgd worden dat alle kaderranden binnenin 'dotted' worden weergegeven? Waar zit de fout en hoe eraan verhelpen?

Met vriendelijke groeten en beste dank reeds op voorhand,

nIh1IlO
 
Hoi NIh1IlO,
Het is niet echt fout, maar er krijgen wel een paar browser-rariteiten de kans hun eigen zin te doen:
  • Voor goede cross-browser resultaten kan je het beste het Strict Doctype nemen.
  • De tabel had zowel pixel-breedtes voor de cellen als een breedte van 60% voor de tabel als geheel. Daardoor gaan de browsers de 60% uitsmeren over de cellen, en dat kan browserverschillen opleveren. Hier kan denk ik het beste de pixel-verdeling aangehouden worden, maar dan op de echte aantallen die uit een screenshot van je testpagina tevoorschijn komen.
  • De cel-indeling van de samengevoegde cellen met de opschriften was rechttoe-rechtaan: als losse cellen opgemaakt. - Met colspan's voor het paraplu'en over de cellen er onder is er minder risico van afwijkingen.
  • Chrome blijkt de onhebbelijkheid te hebben om de weergave van de stippeltjes per cel afhankelijk te maken van het aantal pixels; met wat trial & error (pixeltje meer of minder in de breedte) is hier gelukkig een mouw aan te passen.
  • Voor 't gemak kunnen alle inline styles vervangen worden door een style-blok in de <head>, waarmee alle <td>'s enz. tegelijkertijd bediend kunnen worden: die hebben voor het merendeel dezelfde eigenschappen.
  • Internet Explorer 7 heeft ten overvloede een opgave {width: auto;} nodig om de breedte (resp. het centreren) in de colspan-cellen te kunnen benutten.
  • Voor het verplaatsen van de hele tabel over de pagina kan er een <div> met een float omheen gezet worden; deze kan met de margin-instellingen daarvan naar de goede plek gerangeerd worden.

Met nog een paar kleine detail-verfijningen kan dan bv. dit uit de bus komen:



Resultaten:
  • Getest en in orde bevonden in Firefox, Chrome, Internet Explorer 7, Opera en Safari.
  • Volgens Netrenderer.com ook in orde bij Internet Explorer 8, 9 en 10-ConsumerPreview.
  • En komt zelfs ongeschonden door IE6 en IE5.5 (!), die geen stippeltjes kennen maar het met streepjes-lijntjes doen. :)
  • Het is valid html4.1 Strict.
  • Het is valid css2.1.

Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
Beste csshunter,

Van harte bedankt voor de uitgebreide toelichting. Het werkt perfect in Dreamweaver.
Bij WordPress doet hij het echter niet zoals blijkt uit deze link.
Ik dacht dat een oplossing voor Dreamweaver eveneens geldig zou zijn voor WordPress, wat niet het geval is.
Hoe kan hieraan dan wel een oplossing voor gegeven worden?
 
Hoi NIh1IlO,
De "deze link" gaat naar een niet bestaande pagina - heb je een andere?
 
Sorry, csshunter,

Ik had het bericht als concept opgeslagen maar nu is het wel degelijk gepubliceerd.
Nu zou het dus wel moeten lukken om de link te openen.

nIh1IlO
 
Ja hoor, link gelukt.

In het systeem van Wordpress blijken algemene stijlregels te zitten, die dwars door onze werkende Dreamweaver-styles heen lopen.
  • Er zit in de bovenste vakjes nu een randje donkere achtergrond die er niet hoort. Waar dat precies uithangt in de WP-styles weet ik niet, maar het kan wel hersteld worden!

Ook gaan Chrome en Safari (die van dezelfde "Webkit" browser-machine uitgaan) weer raar doen met de stippeltjes. Dat zou je met uitproberen van pixels meer en minder wellicht kunnen opheffen, maar ik heb een ander idee.
  • De afwijkingen van Chrome en Safari zitten in de dubbele vakjes met de cursieve opschriften. Het lijkt me geen bezwaar als die vakjes een ander type lijntje hebben. Dat kan gewoon een dunne vaste lijn zijn ipv stippeltjes, dan ben je er van af.
  • (ook vaste lijnen voor alles is natuurlijk altijd mogelijk).

Daarmee is m'n suggestie:
Code: 
#table-1 .cursief {
    background: #E6E8E9;
    border: 1px solid #A7A9FD;
    font-style: italic;
    line-height: 110%;
    padding: 5px 0;
}
- Of andere kleurtjes. :)

Met vriendelijke groet,
CSShunter
 
Beste CSShunter,

Nogmaals van harte bedankt voor je heldere feedback.
Ik zal je raad opvolgen en je suggestie uitvoeren.

Met vriendelijke groeten,

nIh1IlO
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan