Hallo iedereen!
Ik ben een beetje aan het klooien geweest om een design op te zetten voor een site die ik probeer te bouwen. Nu zit ik alleen met een subtiel verschil in weergave tussen Firefox en Internet Explorer. Firefox geeft alles weer zoals ik graag zou zien.
Mijn code binnen de <body> tags is als volgt:
Bij deze code hoort de volgende stylesheet:
Zoals ik al eerder aangaf geeft Firefox de site weer zoals ik graag wil. De maten zijn strak en alles sluit goed op elkaar aan. Internet Explorer heeft alleen het probleem dat de rechter-border van mijn #container niet goed aansluit op de elementen in deze container. Met andere woorden lijkt de 'width' van de container groter dan dan 'width' van de elementen (header, menu, content en footer) in deze container. Er zit dus een soort van wit stukje tussen de rechterborder van de container en de andere horizontale borders van de elementen in de container.
Vraag 1: Weet iemand waardoor dit verschil in weergave tussen FF en IE wordt veroorzaakt, en bestaan hiervoor ook oplossingen?
Mijn container heeft nu een absolute hoogte van 600 pixels. Ik zou graag een relatieve hoogte van 100% willen hebben zodat de hoogte van het scherm altijd gevuld is met mijn 'content' gedeelte van de site. De header, het menu en de footer hebben alleen een absolute hoogte, zoals te zien is in mijn CSS. De content zou zich dus aan moeten passen aan de grootte van het scherm.
Vraag 2: Weet iemand een oplossing om de container een hoogte van 100% te geven, en dan de hoogte van het content-gedeelte variabel (aangepast aan de grootte van het scherm) te maken?
Ik kan me voorstellen dat dit zeer simpele vragen lijken voor sommige mensen. Ik heb echter goed gezocht op google en misschien omdat ik nog niet zo heel erg sterk ben met dit soort onderwerpen heb ik geen resultaten gevonden die mij verder op weg kunnen helpen. Hopelijk heeft iemand van jullie antwoorden op mijn vragen.
Alvast ontzettend bedankt voor de moeite!!
Ik ben een beetje aan het klooien geweest om een design op te zetten voor een site die ik probeer te bouwen. Nu zit ik alleen met een subtiel verschil in weergave tussen Firefox en Internet Explorer. Firefox geeft alles weer zoals ik graag zou zien.
Mijn code binnen de <body> tags is als volgt:
HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
| <!-- Container with header, menu, page and footer --> <div id="container"> <!-- Header --> <div id="header"> [ Header ] </div> <!-- Menu-items --> <div id="menu"> [ Menu ] </div> <!-- Content --> <div id="content"> [ Content ] </div> <!-- Footer --> <div id="footer"> [ Footer ] </div> </div> |
Bij deze code hoort de volgende stylesheet:
Cascading Stylesheet:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
| body { font-family: Verdana, Geneva, Arial, helvetica, sans-serif; font-size: 13px; color: #aaaaaa; margin: 0px; } #container { width: 800px; height: 600px; border: 2px #000000 solid; } #header { width: 100%; height: 78px; background: #FFFF66; margin: 0px; padding: 0px; text-align: left; } #menu { width: 100%; height: 18px; background: #FFFF66; margin: 0px; padding: 0px; text-align: center; border-bottom: 1px #000000 solid; border-top: 1px #000000 solid; } #content { width: 100%; height: 414px; background: #FFFFCC; margin: 0px; padding: 5px; text-align: left; } #footer { width: 100%; height: 78px; background: #FFFF66; margin: 0px; padding: 0px; border-top: 1px #000000 solid; } |
Zoals ik al eerder aangaf geeft Firefox de site weer zoals ik graag wil. De maten zijn strak en alles sluit goed op elkaar aan. Internet Explorer heeft alleen het probleem dat de rechter-border van mijn #container niet goed aansluit op de elementen in deze container. Met andere woorden lijkt de 'width' van de container groter dan dan 'width' van de elementen (header, menu, content en footer) in deze container. Er zit dus een soort van wit stukje tussen de rechterborder van de container en de andere horizontale borders van de elementen in de container.
Vraag 1: Weet iemand waardoor dit verschil in weergave tussen FF en IE wordt veroorzaakt, en bestaan hiervoor ook oplossingen?
Mijn container heeft nu een absolute hoogte van 600 pixels. Ik zou graag een relatieve hoogte van 100% willen hebben zodat de hoogte van het scherm altijd gevuld is met mijn 'content' gedeelte van de site. De header, het menu en de footer hebben alleen een absolute hoogte, zoals te zien is in mijn CSS. De content zou zich dus aan moeten passen aan de grootte van het scherm.
Vraag 2: Weet iemand een oplossing om de container een hoogte van 100% te geven, en dan de hoogte van het content-gedeelte variabel (aangepast aan de grootte van het scherm) te maken?
Ik kan me voorstellen dat dit zeer simpele vragen lijken voor sommige mensen. Ik heb echter goed gezocht op google en misschien omdat ik nog niet zo heel erg sterk ben met dit soort onderwerpen heb ik geen resultaten gevonden die mij verder op weg kunnen helpen. Hopelijk heeft iemand van jullie antwoorden op mijn vragen.
Alvast ontzettend bedankt voor de moeite!!
:strip_exif()/u/41306/web_anim.gif?f=community)
/u/129382/crop5f6f24af0ae5d.png?f=community)
Waar ik die box-sizing voor gebruikt heb is omdat je soms juist wel de afmetingen inclusief borders en paddings wilt kunnen bepalen. In moderne browsers doe je dat netjes en eenvoudig middels de box-sizing property.
