Ik wist zo snel niet hoe ik de vraag anders kan formuleren.
Mijn content is geplaatst in DIV0. Het enige wat vast staat in DIV0 is dat DIV3, DIV4 en DIV5 (lichtblauw) beneden in DIV0 geplaatst moeten worden, een simpele berekening leert dat de padding-bottom: 127px; moet zijn.
Voor het voorbeeld heb ik DIV2 geforceerd op 300px hoogte en DIV0 een zwarte achtergrond gegeven.
Alle divs (behalve DIV0, en de zijkanten van DIV1 en DIV2) moeten 1 pixel ruimte hebben tussen elkaar.
Nu het gene waar ik al dagen mijn hoofd over breek. In Firebird geen probleem (heb geen andere browsers behalve FireBird 0.7 en IE6 geinstalleerd), in IE6 is de pixel lijn die de blauwe divs van de rode scheidt aan de onderzijde weg, deze is te vinden onder alle blauwe divs.
Wanneer ik de padding-bottom van DIV0 op 128px zet is het probleem weg in IE6, maar zit ik wel met twee pixels tussenruimte te kijken, zowel in IE6 en Firebird.
Eerlijk gezegd weet ik niet waar ik op moet zoeken en wat ik dus over het hoofd zie. Een hint zou zeer op prijs worden gesteld!
En een afbeelding...
Mijn content is geplaatst in DIV0. Het enige wat vast staat in DIV0 is dat DIV3, DIV4 en DIV5 (lichtblauw) beneden in DIV0 geplaatst moeten worden, een simpele berekening leert dat de padding-bottom: 127px; moet zijn.
Voor het voorbeeld heb ik DIV2 geforceerd op 300px hoogte en DIV0 een zwarte achtergrond gegeven.
Alle divs (behalve DIV0, en de zijkanten van DIV1 en DIV2) moeten 1 pixel ruimte hebben tussen elkaar.
Nu het gene waar ik al dagen mijn hoofd over breek. In Firebird geen probleem (heb geen andere browsers behalve FireBird 0.7 en IE6 geinstalleerd), in IE6 is de pixel lijn die de blauwe divs van de rode scheidt aan de onderzijde weg, deze is te vinden onder alle blauwe divs.
Wanneer ik de padding-bottom van DIV0 op 128px zet is het probleem weg in IE6, maar zit ik wel met twee pixels tussenruimte te kijken, zowel in IE6 en Firebird.
Eerlijk gezegd weet ik niet waar ik op moet zoeken en wat ik dus over het hoofd zie. Een hint zou zeer op prijs worden gesteld!
code:
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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
| <html>
<head>
<title>
some amazing title should go here but lack of inspiration at the moment
</title>
<style type="text/css">
<!--
div {
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#DIV0 {
background-color: #000000;
height: auto;
width: 600px;
left: 151px;
top: 101px;
position: absolute;
overflow: visible;
padding-bottom: 127px;
padding-top: 0px;
padding-right: 0px;
padding-left: 0px;
}
#DIV1 {
background-color: #FF0000;
height: auto;
width: 320px;
left: 0px;
top: 0px;
position: absolute;
visibility: visible;
overflow: visible;
}
#DIV2 {
background-color: #FF0000;
height: 300px;
width: 280px;
left: 320px;
top: 0px;
position: relative;
visibility: visible;
overflow: visible;
}
#DIV3 {
background-color: #99B1CA;
height: 100px;
width: 100px;
position: absolute;
bottom: 26px;
}
#DIV4 {
background-color: #99B1CA;
height: 100px;
width: 499px;
position: absolute;
bottom: 26px;
left: 101px;
}
#DIV5 {
background-color: #99B1CA;
height: 25px;
width: 600px;
position: absolute;
bottom: 0px;
}
-->
</style>
</head>
<body>
<div id="DIV0" title="container">
<div id="DIV1">
DIV 1
</div>
<div id="DIV2">
DIV 2
</div>
<div id="DIV3" title="documents">
DIV 3
</div>
<div id="DIV4" title="documents">
DIV 4
</div>
<div id="DIV5" title="footer">
DIV 5
</div>
</div>
</body>
</html> |
En een afbeelding...