Op deze website gebruiken we cookies om content en advertenties te personaliseren, om functies voor social media te bieden en om ons websiteverkeer te analyseren. Ook delen we informatie over uw gebruik van onze site met onze partners voor social media, adverteren en analyse. Deze partners kunnen deze gegevens combineren met andere informatie die u aan ze heeft verstrekt of die ze hebben verzameld op basis van uw gebruik van hun services. Meer informatie.

Akkoord

Vraag & Antwoord

Webdesign (HTML, CSS, Flash)

[CSS] td height + border

berkery
16 antwoorden
  • Ik heb een tabel, met een td waaraan ik dmv css een aantal eigenschappen meegeef:
    [code:1:b7abc91935]td.menu {
    width: 188px;
    height: 350px;
    padding: 2px;
    border: 1px solid #000000;
    font-size: 13pt;
    font-weight: bold;
    }[/code:1:b7abc91935]
    In MSIE (gewenste buitenafmetingen 190x356):
    De breedte (incl border) van de td is nu 1+188+1 = [b:b7abc91935]190[/b:b7abc91935]
    De hoogte (incl border) van de td is 1+2+350+2+1 = [b:b7abc91935]356[/b:b7abc91935]
    (1 = border, 2 = padding)

    In FF:
    De breedte (incl border) van de td is nu 1+188+1 = [b:b7abc91935]190[/b:b7abc91935]
    De hoogte (incl border) van de td is 350 = [b:b7abc91935]350[/b:b7abc91935]
    (1 = border)

    De breedte wordt dus in beide browsers bepaald door [i:b7abc91935]width+(2*border)[/i:b7abc91935].
    De hoogte wordt in MSIE bepaald door [i:b7abc91935]height+(2*border)+(2*padding)[/i:b7abc91935], in FF alleen door [i:b7abc91935]height[/i:b7abc91935].
    Gevolg: verschillende buitenhoogte in verschillende browsers, wat afbreuk doet aan het ontwerp…

    Is er een mogelijkheid om dit op te lossen, en in welke richting moet ik dan denken :-? …
  • Zou het misschien met 'compatibility mode' /'standards mode' te maken hebben. Mijn css-handleiding vermeldt dat het, als je css gebruikt, verstandig is om bovenin je html-pagina de volgende regel op te nemen:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

    Ik weet niet of dit nog altijd actueel is, voor mij ook een interesante vraag, maar blijkbaar is er nog steeds verschil in weergave. Volgens de handleiding zou met die doctype-declaratie alles op dezelfde standaard manier worden weergeven. Althans, wat betreft de stylesheet.

    Jan de Boer
  • Ik werk standaard met het strict-doctype
    [code:1:4a1026c09a]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">[/code:1:4a1026c09a]
  • Je kunt ervoor kiezen stijlregels te maken die alleen door IE worden gelezen. Daar zijn diverse manieren voor.
    - Conditional comments, voor IE: www.quirksmode.org/css/condcom.html
    - Tabel met allerlei filters: www.centricle.com
    ef/css/filters/
    (waaronder eentje die Marientje ook heeft gebruikt in een ander webdesigntopic.)

    Overigens, wat de handleiding van J. de Boer zegt, is nog steeds actueel. Transitional of Strict is wat betreft de uitwerking op css niet verschillend (rare zin?).
  • [quote:d218bf520e="boelieboelie"]Overigens, wat de handleiding van J. de Boer zegt, is nog steeds actueel. Transitional of Strict is wat betreft de uitwerking op css niet verschillend (rare zin?).[/quote:d218bf520e]

    ? inderdaad een rare zin en volgens mij ook niet juist. Er zit wel degelijk een (groot) verschil tussen transitional en strict. Met strict rendert IE bijvoorbeeld de breedte en hoogte volgens het officieel juiste, maar onbruikbare W3C standaard. Verder worden nog meer css waarden anders behandeld door IE. Voor firefox maakt het idd niet veel uit.
  • Ik heb even een artikel op Naar Voren erbij gehaald, een vertaling van Eric Meyers artikel over doctypes en rendering, maar het wordt mij er niet duidelijker op. Enerzijds bevestigt het artikel wat je zegt:
    [quote:c57df47832]Het mechanisme van de DOCTYPE-wisseling is in wezen vrij duidelijk en helder:
    * Documenten met oudere of Transitional DOCTYPEs (of helemaal geen DOCTYPE) worden vertoond met de ‘loose rendering’ of ‘quirks’ modus. Deze mode, die ook wel ‘bugward compatibility’ genoemd wordt, houdt rekening met historische bugs en eigenaardigheden van Versie 4 browsers.
    * Documenten met Strict of XHTML DOCTYPEs worden vertoond in de ‘strict rendering’ of standaarden modus. Deze modus volgt de specificaties van het W3C voor HTML, CSS en andere layout talen zo goed mogelijk.[/quote:c57df47832]Anderzijds geeft een tabel over doctypewisseling weer dat Standards mode wel degelijk mogelijk is met Transitional + URI. Dus ik ben nu een beetje in de war.

    Weet je nog waar je jouw info vandaan hebt, maIRnaairruJ? Zou graag willen weten wat en vooral hoe er nou precies anders wordt gerenderd.
  • Ik weet niet precies meer waar ik het vandaan heb, volgens mij bij microsoft zelf, maar omdat ik nu ook nieuwsgierig ben geworden heb ik even wat testjes gemaakt. En inderdaad, een doctype, met transitional [i:1f1d25e7b4]en[/i:1f1d25e7b4] een URI werkt net als strict.

    Verrassend, had ik niet verwacht, omdat ik er altijd van uit ben gegaan dat strict daar nu juist voor was.

    hier staan verschillende testen
  • Tegenstrijdigheden dus. Ondanks Standards mode toch nog verschil in weergave bij verschillende browsers?
    Welke ouwe rot op het gebied van css geeft hier het verlossende woord?

    Jan de Boer

    Edit:
    En als ik het goed heb begrepen is die url erin alleen maar ter informatie, maar verder zonder echte functie? Of toch niet?
    Verder misschien een heel domme vraag: wat is het verschil tussen een url en een uri?
  • Nee dat zie je dan toch verkeerd. We hebben net geconcludeerd dat die URI (URL) wel degelijk veel verschil maakt. Met URL gedraagt transitional zich als strict, zonder URL gaat het over in quircksmode.

    Een URI is de overtreffende trap van een URL. Een URL is een URI maar niet andersom.

    http://www.bernzilla.com/item.php?id=100
  • Ondertussen heb ik wat zitten experimenteren met css. Had veel eerder eens het een en ander met css verwerkt, maar dat betrof voornamelijk de eenvoudige zaken zoals background (-color, image etc.), font (-family, -size etc). Weinig of niets gemerkt van verschil in weergave tussen IE6.0, IE5.5 en FF1.0. Daarin bewijst css zeker zijn waarde!

    Maar nu heb ik mede naar aanleiding van dit topic wat zitten knoeien met boxes, en dat lijkt me een regelrechte ramp qua compatibiliteit. Ondanks het uitproberen met een scala aan doctyperegels. Steeds bij wijzigen van de stylesheet even laten testen op
    http://jigsaw.w3.org/css-validator/validator-text.html om zeker te zijn dat ik zelf geen fouten maakte.
    In IE6 werkt alles geheel volgens de regels, maar in FF is het om te huilen, nog afgezien van het verschil in interpretatie van "width" (ook IE5.5 leest dit anders dan IE6.

    Voorlopig reden voor ons om het werken css voorlopig te beperken tot standaard zaken. Het advies van mij aan mijn vrouw, die diverse websites beheert, om wat meer met css te doen trek ik dus voorlopig in tot het moment dat ik hier veel meer inzicht in heb.

    Jan de Boer
  • [quote:2cf1336055="J. de Boer"]
    Voorlopig reden voor ons om het werken css voorlopig te beperken tot standaard zaken. Het advies van mij aan mijn vrouw, die diverse websites beheert, om wat meer met css te doen trek ik dus voorlopig in tot het moment dat ik hier veel meer inzicht in heb.
    [/quote:2cf1336055]

    Nergens voor nodig, er zijn naast het spelen met het doctype nog betere manieren om de verschillende browserbugs te omzeilen.

    http://glish.com/css/hacks.asp
    http://w3development.de/css/hide_css_from_browsers/
    http://www.quirksmode.org/css/csshacks.html

    Bij het schrijven van CSS is het overigens het beste om het eerst te testen in Mozilla/Firefox, en het later aan te passen voor IE. Dat scheelt een hoop frustraties.
  • Het is niet FF die raar doet of alle andere browsers (Safari, Opera, etc) die raar doen (want die gaan net als FF juist met het boxmodel om), het is slechts IE die raar doet, vooral IE4 (win/mac), IE5 (win/mac) en IE5.x, maar ook IE6 (vooral in Quirks mode). Deze problemen van IE zijn zeer goed gedocumenteerd, zoals berkery al aangeeft.

    Andere bronnen zijn bijv.:
    www.positioniseverything.net/explorer.html
    www.macedition.com/cb/ie5macbugs/

    Als je het box-model begrijpt en op basis van die kennis de site bouwt (test in FF, niet in IE!), dan zal er dus niks aan de hand zijn…

    … Behalve in IE. M.b.v. de artikelen die reeds genoemd zijn, kun je die problemen oplossen. Dat komt in bijna alle gevallen neer op simpelweg het toevoegen van één of enkele extra regels CSS.

    Ik zou dus eigenlijk aanraden eerst eens wat meer te lezen over CSS-browserbugs, alvorens zulke sterke oordelen daarover te vormen.
  • Bedankt voor de reacties. Ik ga hier beslist mee aan de slag.
    En wat dat "sterke oordeel" betreft: Ik eindigde mijn betoog met " …….tot het moment dat ik hier veel meer inzicht in heb. Dus zo hard was mijn oordeel niet. Voor de wat eenvoudiger zaken loopt css zoals ik aangaf immers prima.

    Ik wil het beslist niet beter weten, jullie hebben met css ongetwijfeld wat meer ervaring dan ik, en daarom probeer ik in alle bescheidenheid hier wat wijzer te worden, maar op verschillende sites lees ik dat css1 en css2 volledig in IE6 is geïmplementeerd zoals dit is bedoeld volgens de door W3C vastgestelde regels. Blijft daarnaast ook mijn constatering dat dit "simpelweg toevoegen van één of enkele extra regels CSS" nodig blijkt voor FF en niet voor IE, zie ook de ervaringen van topicstarter.
    Ik stelde die stylesheet nl. "geheel volgens het boekje" samen zonder naar de browser te kijken, waarna het in IE6 meteen werkte, in IE5.5 ook, maar met een klein verschil (iets andere interpretatie van de breedte en van border-width). Tenslotte: In FF werkte het voor de helft, d.w.z. in geval van een enkele box correct, maar bij twee boxen binnen een andere, met behulp van "float: left;" en "float: right;" gooide hij alle textkolommen die daarna volgden wat positionering betreft doorelkaar, ook van de single-boxes die daarna volgden (alles betrof teksten in lijsten).

    Die "binnenvenstertjes" hebben nu geen width- en height-properties, en misschien is dat strict genomen nog nodig voor een goed functioneren in alle browsers? Ik meende nl. dat dat met float niet nodig was. Ik ga een en ander uitproberen, want volgens mij moet het toch zondermeer kunnen dat "nesten" van vensters.
    Wat de HTML-tags <DL>, <DT> en <P> betreft in die vensters, deze heb ik alle zoals wordt geadviseerd beëindigd met afsluittags (in de juiste volgorde!).

    Hoe dan ook, zolang ik dit alles niet volledig beheers blijf ik bij mijn "sterk" genoemde oordeel/voornemen/advies aan mijn vrouw om voor wat complexere zaken css nog even achterwege te laten. Niemand is gebaat bij onbedoelde gebrekkige weergave in welke browser dan ook. Zeker niet nu dat gedeelte het simpel met html op alle fronten goed doet.

    Jan de Boer

    Edit:
    Is topic starter al uit zijn probleem?
  • @J. de Boer:
    De overheid heeft een website gebouwd waar zij overheidsdiensten informeert over het bouwen van een goede website: webrichtlijnen.overheid.nl. Op die site kunt u meer lezen over browserverschillen op het gebied van CSS en hoe daar wat aan te toen. Ik kan u ook van harte aanraden de volledige sectie Productie te lezen, voor objectieve, correcte info over websiteontwikkeling.

    @redmar:
    Hoe heb je het opgelost?
    Overigens vermoed ik dat je waarschijnlijk een tabel gebruikt voor layoutdoeleinden, Heb je ooit overwogen de tabel overboord te gooien en met divs te gaan werken?
    http://webrichtlijnen.overheid.nl/handleiding/ontwikkeling/productie/tabellen/layout/
    Ander idee is een div in de tabelcel gooien en die div te stylen.
  • Hey,

    Ik gebruik nu (tijdelijk?) gewoon een gekleurd vlak ipv een cel met border. Heb nog niet de tijd gehad om naar alle mogelijke oplossingen te kijken en te proberen.

    Div's heb ik zeker wel overwogen, maar houdt het voorlopig nog even bij tabellen. div in td heb ik vaker gebruikt en wellicht is dat hier inderdaad ook een mogelijkheid, zal ik dus ook nog even proberen.

    Bedankt zover! En discussieer en hypothetiseer natuurlijk graag verder hierover :D
  • [quote:74c20b4462="J. de Boer"]….knip…..
    Ik stelde die stylesheet nl. "geheel volgens het boekje" samen zonder naar de browser te kijken, waarna het in IE6 meteen werkte, in IE5.5 ook, maar met een klein verschil ….knip…..
    Die "binnenvenstertjes" hebben nu geen width- en height-properties, en misschien is dat strict genomen nog nodig voor een goed functioneren in alle browsers? Ik meende nl. dat dat met float niet nodig was. Ik ga een en ander uitproberen, want volgens mij moet het toch zondermeer kunnen dat "nesten" van vensters.
    [/quote:74c20b4462]Hoe simpel een oplossing kan zijn :oops: Toch wel even vermeldenswaard. Ik vergat na gebruik van float:left en float:right die <div> waarin ik dit had toegepast af te sluiten met clear:both. Staat duidelijk in het boekje :oops:
    IE staat dat weglaten blijkbaar gewoon toe, en kan daardoor uitnodigen tot slordig programeren, FF vereist stricte regels.
    Resten nog een paar kleinigheden, maar daar kom ik wel uit. Bedankt voor de tips.

    Jan de Boer

    Edit:
    Aan Redmar:
    Mijn voorbeeld lijkt enigszins op dat van jou, vandaar mij inhaken in dit topic
    In mijn probeersels van een bestaande offline pagina gebruikte ik geen tabellen, maar lijsten binnen een div. Bij twee kolommen een float: left en een float: right. Dus:[code:1:74c20b4462]
    <div class="venster">
    <div class="linker-kolom">
    <dl>
    <dt>item 1</dt>
    <dt>item 2</dt>
    </dl></div>
    <div class="rechter-kolom">
    <dl>
    <dt>item 11</dt>
    <dt>item 12</dt>
    </dl></div>
    <p class="clear">
    <div>
    [/code:1:74c20b4462]

    Venster is met kaderlijntjes, linker-kolom en rechter-kolom (met float left resp right) zonder kaderlijntjes.

    Jan de Boer

Beantwoord deze vraag

Dit is een gearchiveerde pagina. Antwoorden is niet meer mogelijk.