Naar aanleiding van een topic van dajando heb ik even een zeer eenvoudige pagina opgezet met de volgende source:
en deze stylesheet:
in de 3 grote browsers is dit het resultaat:
Zoals je ziet geven opera en msie hetzelfde resultaat; alleen mozilla neemt de height niet relative t.o.v. het parent element, zoals in de W3C CSS2 specs staat beschreven.
Met de volgende stylesheet:
is dit het resultaat:
Opera en msie geven weer hetzelfde resultaat, de div heeft een hoogte van 60% t.o.v. het containing element, nl. de body. Mozilla geeft nog steeds koppig dezelfde hoogte aan de div.
Wat ik echter bij deze stylesheet zou verwachten, is dat de div ook nog eens vertikaal gecentreerd zou zijn, wat bij geen van de browsers het geval is, en dat terwijl de body toch een vertical-align: middle; heeft meegekregen.
Mijn vraag: welke browser (if any) geeft de code weer zoals deze geïnterpreteerd zou moeten worden, en waarom gaan ze bij vertical-align allemaal de mist in?
2e vraag: zijn er workarounds voor? in die zin dat mozilla de eerste pagina weergeeft met een goede hoogte voor de div, en dat de drie browsers de div in het tweede voorbeeld ook vertikaal centreren?
Ik vraag hier dus niet naar javascript-oplossingen; die zijn mij bekend. Ik vraag mij gewoon af waarom dingen hier niet gaan zoals je zou verwachten
PHP:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| <?="<?xml version=\"1.0\" encoding=\"iso-8859-1\"?>\n"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>CSS</title> <link rel="stylesheet" href="style.css" type="text/css" /> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> </head> <body> <div id="container">Middle align?</div> </body> </html> |
en deze stylesheet:
PHP:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| body { height: 100%; padding: 0px; margin: 0px; text-align: center; vertical-align: middle; } #container { background: #eee; width: 30%; border: 1px solid #666; height: 100%; margin: auto; } |
in de 3 grote browsers is dit het resultaat:
Zoals je ziet geven opera en msie hetzelfde resultaat; alleen mozilla neemt de height niet relative t.o.v. het parent element, zoals in de W3C CSS2 specs staat beschreven.
Met de volgende stylesheet:
PHP:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| body { height: 100%; padding: 0px; margin: 0px; text-align: center; vertical-align: middle; } #container { background: #eee; width: 30%; border: 1px solid #666; height: 60%; margin: auto; } |
is dit het resultaat:
Opera en msie geven weer hetzelfde resultaat, de div heeft een hoogte van 60% t.o.v. het containing element, nl. de body. Mozilla geeft nog steeds koppig dezelfde hoogte aan de div.
Wat ik echter bij deze stylesheet zou verwachten, is dat de div ook nog eens vertikaal gecentreerd zou zijn, wat bij geen van de browsers het geval is, en dat terwijl de body toch een vertical-align: middle; heeft meegekregen.
Mijn vraag: welke browser (if any) geeft de code weer zoals deze geïnterpreteerd zou moeten worden, en waarom gaan ze bij vertical-align allemaal de mist in?
2e vraag: zijn er workarounds voor? in die zin dat mozilla de eerste pagina weergeeft met een goede hoogte voor de div, en dat de drie browsers de div in het tweede voorbeeld ook vertikaal centreren?
Ik vraag hier dus niet naar javascript-oplossingen; die zijn mij bekend. Ik vraag mij gewoon af waarom dingen hier niet gaan zoals je zou verwachten
[ Voor 6% gewijzigd door Verwijderd op 18-12-2002 17:35 . Reden: regels tijdig afgebroken ]
m'n huiswerk niet goed gedaan...