[CSS] 1 pixel probleem met padding-bottom

Pagina: 1
Acties:

  • coensel
  • Registratie: September 2001
  • Laatst online: 13-06-2021
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! :)


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...

Afbeeldingslocatie: http://www.arpie.net/GOT.gif

  • coensel
  • Registratie: September 2001
  • Laatst online: 13-06-2021
Ik haat kicken van een topic... maar het is goed bedoeld, als er geen hints komen sterft ie een stille dood ;)

  • André
  • Registratie: Maart 2002
  • Laatst online: 26-05 00:33

André

Analytics dude

Ik heb er gisteren al even naar gekeken maar het is me niet helemaal duidelijk wat het probleem is. Kun je je vraag ook echt toespitsen op het stukje code waar het fout gaat.

  • coensel
  • Registratie: September 2001
  • Laatst online: 13-06-2021
Oh sorry, daar was ik wat bang voor, ik zal het vanavond wat beter toelichten, anders doe ik het te snel nu.

  • crisp
  • Registratie: Februari 2000
  • Laatst online: 08:20

crisp

Devver

Pixelated

ik heb er ook al even naar gekeken, maar kan niet anders concluderen dan dat het een renderbug is in IE...

Intentionally left blank


  • coensel
  • Registratie: September 2001
  • Laatst online: 13-06-2021
|:( Een week lang lopen pielen op een renderbug... :'( (niet tijdens werktijd goddank ;))

Bedankt toch Andre voor het aanbieden :) Maar geen tijd meer aan verspillen :)
Pagina: 1