[XHTML] Doctype horror - Softwareontwikkeling

woensdag 21 juli 2004 16:00

Acties:

Verwijderd

Topicstarter

Ik word helemaal leip van een Strict XHTML doctype die maar niet lijkt te werken. Ik heb diverse sites geraadpleegd en hun doctypes gejat (ook van authoriteiten als Zeldman, 37 Signals en CSS Zen Garden) maar zonder succes.

Welke verlichte ziel kan mij uitleggen waarom de onderstaande HTML-code ervoor zorgt dat de wrapper-div 800px breed wordt in Netscape 7.1 en Safari, terwijl er toch duidelijk 760px in de CSS staat?

PHP:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <title>An XHTML 1.0 Strict standard template</title>
        <meta http-equiv="content-type" content="text/html;charset=utf-8" />
        <meta http-equiv="content-style-type" content="text/css" />
        <link href="css/style.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <div id="wrapper">KRIJG NOU HET LAZARUS</div>
    </body>
</html>

En de CSS code:

PHP:

body {
    background-color: #CCC;
    font: normal 11px tahoma, helvetica, sans-serif;
    margin: 0;
}

div#wrapper {
    background-color: #FFF;
    padding: 20px;
    width: 760px;
}

(PHP tags even negeren)

woensdag 21 juli 2004 16:02

Acties:

intGod

Ars non postulat causam

Omdat je padding buiten de box valt.

Dat had je gewoon ook even kunnen komen vragen

Edit:

Dat wil dus zeggen dat je 20+760+20 px krijgt. Da's ook hoe het bedoeld is door het W3C alleen is het in IE altijd verkeerd geimplementeerd.

[ Voor 47% gewijzigd door intGod op 21-07-2004 16:03 ]

woensdag 21 juli 2004 16:04

Acties:

NMe

Quia Ego Sic Dico.

intGod schreef op 21 juli 2004 @ 16:02:
Dat wil dus zeggen dat je 20+760+20 px krijgt. Da's ook hoe het bedoeld is door het W3C alleen is het in IE altijd verkeerd geimplementeerd.

"Altijd" gaat wat ver he?

Ook IE doet wel eens dingen goed. Maar met breedtes zie je sowieso vaak veel verschil tussen browsers.

'E's fighting in there!' he stuttered, grabbing the captain's arm.
'All by himself?' said the captain.
'No, with everyone!' shouted Nobby, hopping from one foot to the other.

woensdag 21 juli 2004 16:04

Acties:

Verwijderd

Topicstarter

Niet volgens de XHTML standaard die expliciet aangeroepen wordt door de doctype

woensdag 21 juli 2004 16:05

Acties:

intGod

Ars non postulat causam

NMe84 schreef op 21 juli 2004 @ 16:04:
[...]

"Altijd" gaat wat ver he? Ook IE doet wel eens dingen goed. Maar met breedtes zie je sowieso vaak veel verschil tussen browsers.

Waar heb ik dan 'altijd' geschreven? Ik vind het box-model van IE op zich handiger omdat het makkelijker rekent.

Mij hoor je niet klagen over IE

EDIT: M'n eigen post niet goed gelezen

met 'altijd verkeerd' bedoelde ik dat het boxmodel in IE altijd omgekeerd geimplementeerd is geweest. Niet dat alles altijd verkeerd is geimplementeerd

schiet me maar.

[ Voor 25% gewijzigd door intGod op 21-07-2004 16:07 ]

woensdag 21 juli 2004 16:07

Acties:

drm

f0pc0dert

-> Webdesign & Graphics

Music is the pleasure the human mind experiences from counting without being aware that it is counting
~ Gottfried Leibniz

woensdag 21 juli 2004 16:10

Acties:

Verwijderd

Verwijderd schreef op 21 juli 2004 @ 16:04:
Niet volgens de XHTML standaard die expliciet aangeroepen wordt door de doctype

Het staat gewoon letterlijk in de CSS specificaties. Gecko-based browsers doen het zoals in die standaard is afgesproken.

Hoe voorkom je dit? Door geen padding + breedte tegelijk op te geven. Het zou in theorie moeten kunnen, maar in praktijk creëer je gewoon een probleem door implementatieverschillen.

woensdag 21 juli 2004 16:12

Acties:

Genoil

De reden dat IE hier toch weer in quirks-mode schiet is de eerste regel:

code:

1	<?xml version="1.0" encoding="utf-8"?>

Die moet weg, wil IE6 in quasi-W3C modus werken...
En dan voor alles < IE6 met boxmodel hacks aan het prutsen

woensdag 21 juli 2004 16:12

Acties:

Verwijderd

Topicstarter

Padding en borders horen binnen de opgegeven breedte te vallen. Iedere browser die zich daar niet aan houdt is ontdeugend.

Ik weet dat het mogelijk is om het zonder hacks werkend te krijgen in alle nieuwere browsers, maar ik weet niet meer hoe.

Ik bedoel; als Zeldman en consorten het kunnen, moet het toch mogelijk zijn?

woensdag 21 juli 2004 16:15

Acties:

Verwijderd

Topicstarter

Genoil schreef op 21 juli 2004 @ 16:12:
De reden dat IE hier toch weer in quirks-mode schiet is de eerste regel:
code:
1
<?xml version="1.0" encoding="utf-8"?>
Die moet weg, wil IE6 in quasi-W3C modus werken...
En dan voor alles < IE6 met boxmodel hacks aan het prutsen

Nee, het vreemde is dus dat juist mèt die <?xml ?> tag IE6 het wel goed doet. Haal je 'm weg, dan gaat IE in quirksmode (en dus 800px breed). Probeer zelf maar.

woensdag 21 juli 2004 16:17

Acties:

Verwijderd

intGod schreef op 21 juli 2004 @ 16:05:
Mij hoor je niet klagen over IE

mij wel, het heeft idd te maken met box model interpretatie, kort gezegd IE doet het fout, en de rest doet het goed. Haal de xml declaratie maar eens weg boven de doctype en je zal zien dat IE6 precies hetzelfde doet als de andere browsers.

Wil je andere browsers in het IE 6 keurslijf dwingen dan voeg je het volgende toe:

code:

div {
    -moz-box-sizing:border-box;
    box-sizing:border-box;
}

woensdag 21 juli 2004 16:17

Acties:

Verwijderd

Verwijderd schreef op 21 juli 2004 @ 16:15:
Nee, het vreemde is dus dat juist mèt die <?xml ?> tag IE6 het wel goed doet. Haal je 'm weg, dan gaat IE in quirksmode (en dus 800px breed). Probeer zelf maar.

je haalt dingen door elkaar, 800px is in strict mode, 760px is in quirksmode.

Microsoft Internet Explorer 6.0 was the first version of IE for Windows to use the correct box model according to the CSS standard. This means that the CSS width property describes the width of the content of an element (content width). Previously IE treated the width as the outer width (border width) of the element. This means that if you define the width for an element the size will be different depending on which browser and version the user is using.

[ Voor 42% gewijzigd door Verwijderd op 21-07-2004 16:19 ]

woensdag 21 juli 2004 16:18

Acties:

Verwijderd

Verwijderd schreef op 21 juli 2004 @ 16:12:
Padding en borders horen binnen de opgegeven breedte te vallen. Iedere browser die zich daar niet aan houdt is ontdeugend.

Verwijderd schreef op 21 juli 2004 @ 16:15:

Nee, het vreemde is dus dat juist mèt die <?xml ?> tag IE6 het wel goed doet. Haal je 'm weg, dan gaat IE in quirksmode (en dus 800px breed). Probeer zelf maar.

Als je eigenwijs gaat doen, kun je beter geen vragen gaan stellen. Je hebt het fout.

woensdag 21 juli 2004 16:21

Acties:

Verwijderd

Topicstarter

Verwijderd schreef op 21 juli 2004 @ 16:17:
[...]

je haalt dingen door elkaar, 800px is in strict mode, 760px is in quirksmode.

[...]

Ah... volgens mij heb je gelijk

http://tantek.com/CSS/Examples/boxmodelhack.html zegt:

"User agents which misinterpret the CSS1 box model by placing border and padding inside the specified width would result in a total width of only 300px, and a content width of only 200px."

Hmm... EXCUSES!

[ Voor 3% gewijzigd door Verwijderd op 21-07-2004 16:21 ]

woensdag 21 juli 2004 17:06

Acties:

Genoil

Verwijderd schreef op 21 juli 2004 @ 16:17:
Wil je andere browsers in het IE 6 keurslijf dwingen dan voeg je het volgende toe:
code:
1
2
3
4
div {
    -moz-box-sizing:border-box;
    box-sizing:border-box;
}

dit werkt overigens NIET voor de huidige en oudere versies van Apple Safari, waar box-sizing simpelweg (nog) niet geimplementeerd is. Wat "breedst mogelijke ondersteuning" betreft ben je dus het best af met W3C modus (content-box) + hax voor <IE6

woensdag 21 juli 2004 17:12

Acties:

Verwijderd

Genoil schreef op 21 juli 2004 @ 17:06:
dit werkt overigens NIET voor de huidige en oudere versies van Apple Safari, waar box-sizing simpelweg (nog) niet geimplementeerd is. Wat "breedst mogelijke ondersteuning" betreft ben je dus het best af met W3C modus (content-box) + hax voor <IE6

yup en dat is imo ook absoluut aan te raden.

[ Voor 6% gewijzigd door Verwijderd op 21-07-2004 17:13 ]

woensdag 21 juli 2004 19:40

Acties:

Verwijderd

IE 6.0 ondersteund het box model wel degelijk. IE 5.0 voor de Mac ook. IE 6.0 gaat in quirks mode als er ook maar *iets* voor de DOCTYPE komt, of dat nou een comment is of een PI maakt niet zoveel uit (hoewel een comment aan te raden is omdat anders MacIE 4.0 een wit scherm weergeeft).

Je kunt trouwens beter gewoon HTML gebruiken.

woensdag 21 juli 2004 22:51

Acties:

Genoil

Verwijderd schreef op 21 juli 2004 @ 19:40:
IE 6.0 ondersteund het box model wel degelijk. IE 5.0 voor de Mac ook. IE 6.0 gaat in quirks mode als er ook maar *iets* voor de DOCTYPE komt.

Ik zei ook <IE6 en daarnaast, MacIE != IE

Toch blijft het vaag als je dan gaat nadenken over het waarom...zou er dan op een gegeven moment bij Microsoft een of andere geresepcteerde wizard met het idee gekomen zijn van "Nou, we doen het gewoon heel simpel: als er ook maar iets voor het DOCTYPE staat gaan we naar quirksmode!", of is het gewoon een soort bug die als feature wordt gebruikt?

woensdag 21 juli 2004 23:12

Acties:

Verwijderd

Dat laatste denk ik. Misschien hebben ze een soort "substring" functie gebruikt om de doctype te detecteren :-)

Pagina: 1

Reageer