IE 6 padding klopt niet (verspringt)

[Verwijderd]

Volgens mij is het een bekend probleem, maar met een rare twist. In FF en IE 7 laad m'n site (www.fluber.nl) goed, maar in IE 6 wordt de content in de rechter balk net iets teveel naar links geplaatst. Het gekke is, dat ie in eerste instantie goed lijkt te laden, maar dan verspringt ie ineens toch naar links.

Ik heb de dat javascriptje genaamd IE7 al gevonden via de search, maar dit heeft het niet opgelost. Ook op google vind ik veel info over het feit IE 6 idd CSS niet goed afhandeld, maar nergens echt uitleg over hoe je het dan WEL moet doen.

Overigens vermoed ik hetzelfde probleem te hebben als mijn "buurman"

Relevante CSS:

code:

#side {
    float:right;
    width:125px;
    text-align:left;
    
    padding:0px 122px 0px 0px;
    display:block;
    
    color:#1556b2;
    font-family:Calibri, Arial, Helvetica, sans-serif;
    font-size:11px; 
}

        #side p {
            text-align:justify;
        }
        
        #side h3 {
            color:#1556b2;
            font-family:Calibri, Arial, Helvetica, sans-serif;
            font-size:13px;
            line-height:0px;
            margin-bottom:10px;
            margin-top: 20px;
        }

        #side ul{
            list-style-image:url(images/list.gif);
            padding: 0px 0px 0px 30px;
            margin: 0px;
            color:#1556b0;
            font-family:Calibri, Arial, Helvetica, sans-serif;
            font-size:11px; 
        }
        
                #side a:link, a:visited{        
                    color:#1556b0;
                    text-decoration:none;
                }
                        
                #side a:hover, a:active{        
                    color:#000000;
                    text-decoration:underline;
                }

[ Voor 4% gewijzigd door Verwijderd op 11-12-2006 20:14 ]

[Verwijderd]

Even spelen met een combinatie van width, padding en margin en dan moet het toch lukken. Dit is prima te doen met een stukje code die in alle browsers goed werkt. Ik verwacht dat één van die waarde's te hoog of te laag is waardoor het 'optelsommetje' niet goed uitkomt, dit omdat de pagina verspringt.

[Cobalt]

Het heeft wellicht wel te maken met het box-model in css. En dan met name hoe IE hiermee om gaat. De width en de padding zijn anders gedefinieerd in IE dan het W3C dat heeft gedaan.

http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug



De mooiste oplossing hiervoor is (http://www.w3.org/TR/css3-box/#box-sizing):

box-sizing: border-box;

of

box-sizing: content-box;


box-sizing komt uit CSS 3 en werkt onder andere in Opera. IE 7 weet ik zo niet. met border-box gebruik je het box model van IE (wat op zich enigszins logisch is) en met content-box dat van W3C

FireFox heeft de property box-sizing niet algemeen geïmplementeerd. Alleen -moz-box-sizing: border-box; werkt voor mozilla FF. -moz- geeft aan dat de property alleen voor de mozilla browser is.

Aangezien IE 6 box-sizing niet kent moet je voor cross-browser oplossing het volgende gebruiken:

box-sizing: border-box;
-moz-box-sizing: border-box;

[ Voor 9% gewijzigd door Cobalt op 12-12-2006 10:12 ]

[Verwijderd]

Dat box sizing probleem had ik idd al het een en ander over gevonden, maar het lijkt het niet op te lossen (Als ik het goed implementeer hoor)

Dit zou mijn code zijn met de box toevoeging.
Ik heb alleen de mozilla toevoeging weg gelaten, want daardoor verschuift de hele balk in ff een groot stuk naar rechts. Ook als ik dan de padding aan pas naar 0 of -125 of zo dan verschuift ie niet (alsof ie de padding gewoon niet leest)

Dus implementeer ik die hack goed of niet?

code:

#side {
    float:right;
    width:125px;
    text-align:left;
    box-sizing: border-box;
    padding:0px 125px 0px 0px;
    color:#1556b2;
    font-family:Calibri, Arial, Helvetica, sans-serif;
    font-size:11px; 
}

        #side p {
            text-align:left;
        }
        
        #side h3 {
            color:#1556b2;
            font-family:Calibri, Arial, Helvetica, sans-serif;
            font-size:13px;
            line-height:0px;
            margin-bottom:10px;
            margin-top: 20px;
        }

        #side ul{
            list-style-image:url(images/list.gif);
            padding: 0px 0px 0px 30px;
margin:0px;
            color:#1556b0;
            font-family:Calibri, Arial, Helvetica, sans-serif;
            font-size:11px; 
        }
        
                #side a:link, a:visited{        
                    color:#1556b0;
                    text-decoration:none;
                }
                        
                #side a:hover, a:active{        
                    color:#000000;
                    text-decoration:underline;
                }