[CSS/JS] gedrag bij strict.dtd

[Mr_Kite]

Ik werk al een tijdje aan een pagina, en tot nu toe had ik de doctype vermeden, omdat ik merkte dat dat in een aantal gevallen problemen gaf. Nu moet ik er toch echt aan, omdat anders een script dat ik wil gebruiken (Slimbox) het niet doet in IE6+.

Het gaat om de volgende pagina('s): http://zab.extrapuur.nl/~ewout/pf/index.php?about

Ik heb twee rare probleempjes waarvan ik de oorzaak niet kan achterhalen:

Probleem 1
In IE lijkt hij het prima te doen, totdat ik op refresh druk, dan wordt mijn overlay gradient aan de linkerkant ineens veel kleiner. Ik dacht dat het misschien een foutje in het stukje JS was dat ik gebruik om de content en het linkervlak evengroot te maken, maar als ik dat helemaal uitzet is hetzelfde probleem zelfs nog sterker aanwezig. Het script lijkt het probleem dus op te lossen totdat ik op refresh druk (en hij kennelijk het script niet nog eens draait?). Het plaatje wordt vierkant, wat mij doet vermoeden dat het misschien met de PNG hack te maken heeft. Die vervangt (volgens mij) tijdelijk het png bestand door een 1-pixel-grote GIF. Ik denk dat mijn vraag eigenlijk is: hoe laat ik het resize script werken als ik op refresh druk? (tenzij het probleem ergens anders ligt).

Probleem 2
In firefox wil hij helemaal niet meer resizen, gebruik ik een tag die niet strict is? Ook rendert hij er een stripje van 5px onder, die ik nergens terug kan vinden. Ik heb geprobeerd de margins, padding etc etc op 0 te zetten maar dat verandert niks aan dat stripje. Overigens kom ik er niet helemaal uit hoe ik ipv de div het plaatje kan resizen (dan hoef ik geen "height:100%" te gebruiken). Ik heb trouwens geprobeerd of eea daar misschien aan lag, maar ook als ik die height helemaal weg laat wil js de divs niet meer resizen.

hier is het script dat ik gebruik voor het resizen van de divs:

JavaScript:

function uitlijning() {
    var divl, divlh, divr, divrh, grootst
    
    divl=document.getElementById('linker');
    divlk=document.getElementById('kort');
    divr=document.getElementById('content');
    
    if(divlk.offsetHeight){ // determine height for <div> element
         divlh=divlk.offsetHeight+50;
         divrh=divr.offsetHeight+60;
    }
    else if(divlk.style.pixelHeight){
         divlh=divlk.style.pixelHeight+50;
         divrh=divr.style.pixelHeight+100;
    }   

    grootst=Math.max(divlh,divrh);
    
    divl.style.height=grootst;
    divr.style.height=grootst-100;

Frustrerend genoeg werkt alles wél perfect in Opera, maar wie gebruikt dat nu

[XWB]

Voor probleem 2, probeer dit eens:

JavaScript:

divl.style.height=grootst + 'px';
divr.style.height=grootst-100 + 'px';

[Mr_Kite]

ah, danke sehr! Dat IE probleem is sowieso ERG vaag, en het lijkt wel een bug te zijn... als ik achter elkaar een aantal keer op refresh druk, is het probleem er soms wel, soms niet!

Nu begrijp ik ook hoe ik het plaatje kan resizen (zonder dat px deed die het uberhaupt niet), en dan is die IE bug overridden, geloof ik.

dat stripje onderaan in FF blijft hij trouwens wel maken, totdat js het divje resized. Het is niet heel storend, maar het zou mooi zijn als die weg is.

[ Voor 19% gewijzigd door Mr_Kite op 19-11-2006 15:06 ]