[CSS] IE als enige geen nette pagina

[CrashOne]

ik ben bezig met het veranderen van een site,
De nieuwere versie is al volledig w3c valid, zowel html als CSS, echter geeft IE de pagina niet weer zoals ik zou willen.

Opera en mozilla geven beide op een paar kleine puntjes de pagina gelijk weer.

http://tamaela.nl/elise/testing/

De CSS:

http://tamaela.nl/elise/testing/css/tamaela.css

Test resultaten:
HTML
CSS

Nu vraag ik me af hoe ik dit in IE net zo netjes krijg als in mozilla.

Heb van alles geprobeert, maar IE blijft het maar weergeven op zijn eigen manier....

[André]

Het lijkt op een overflow probleem, in IE zet hij een scrollbalk op de hele pagina terwijl er eigenlijk alleen een scrollbalk in de content hoort.

Misschien van overflow:auto --> overflow:scroll maken?

[ Voor 17% gewijzigd door André op 30-09-2003 17:48 ]

[crisp]

geef je div.main ook even een height; IE stretched de div als je geen heigth opgeeft en is niet in staat de juiste height uit je top en bottom te herleiden.

[CrashOne]

André schreef op 30 September 2003 @ 17:47:
Het lijkt op een overflow probleem, in IE zet hij een scrollbalk op de hele pagina terwijl er eigenlijk alleen een scrollbalk in de content hoort.

Misschien van overflow:auto --> overflow:scroll maken?

Dit werkt niet, je ziet nu alleen een grijze scrollbar extra die geeen functie heeft.

crisp schreef op 30 September 2003 @ 17:57:
geef je div.main ook even een height; IE stretched de div als je geen heigth opgeeft en is niet in staat de juiste height uit je top en bottom te herleiden.

Dit kan ik wel doen, maar deze il ik juist van een dynamische grootte hebben, zodat deze mee resized.

Of is er een manier om die hoogt in te vullen die ook w3c valid is, want met expressions werkt het alleen in IE.

[crisp]

CrashOne schreef op 30 September 2003 @ 18:10:
[...]
Dit kan ik wel doen, maar deze il ik juist van een dynamische grootte hebben, zodat deze mee resized.

Of is er een manier om die hoogt in te vullen die ook w3c valid is, want met expressions werkt het alleen in IE.

Dat snap ik, alleen IE snapt dat niet
Je zou javascript kunnen gebruiken om 'm de juiste hoogte te geven, maar dat is wel weer een extra afhankelijkheid, en je moet het resizen van de window dan ook afvangen.
Ik kan me eigenlijk geen andere nette methode voor de geest halen om dit in IE werkend te krijgen op deze manier...

[André]

crisp schreef op 30 September 2003 @ 18:34:
[...]

Ik kan me eigenlijk geen andere nette methode voor de geest halen om dit in IE werkend te krijgen op deze manier...

Frames, Iframes

[crisp]

André schreef op 30 September 2003 @ 18:42:
[...]

Frames, Iframes

Hoe krijg je die in deze opzet dan op de goede hoogte?

[CrashOne]

Met frames is het makkelijk te doen, maar dat wil ik zeker niet. Wil het lekker aan de hand van 1 template en 1 file kunnen parsen.

Ben zelf ook nog wel opzoek naar een mooie CSS oplossing, maar denk idd dat die er niet is.

En om nou css te gaan parsen aan de hand van wat JS, daar zie ik ook niet echt veel in.

[André]

crisp schreef op 30 september 2003 @ 18:43:
[...]

Hoe krijg je die in deze opzet dan op de goede hoogte?

Daarvoor heb je toch het sterretje: rows="120, 120, *, 20"

[ Voor 4% gewijzigd door André op 30-09-2003 19:00 ]

[crisp]

André schreef op 30 September 2003 @ 19:00:
[...]

Daarvoor heb je toch het sterretje: rows="120, 120, *, 20"

met een iframe?

enige andere oplossing die ik zie is toch stiekum een table gebruiken, of gewoon tegen mensen met IE zeggen dat ze maar moeten gaan klagen bij Microsoft

[CrashOne]

Op http://www.glish.com/css/7.asp zie ik dat het horizontaal wel mogelijk is, dat IE css 1 niet volledig ondersteunt wist ik al, maar dit is meer een bug?

[ Voor 33% gewijzigd door crisp op 30-09-2003 21:11 . Reden: oops ]

[crisp]

Geen bug, meer een tekortkoming denk. Ik ga even testen...

edit: nee, werkt niet verticaal zoals ik al dacht - is geen bug maar gewoon een tekortkoming van IE.

[ Voor 48% gewijzigd door crisp op 30-09-2003 21:18 ]

[Clay]

CrashOne schreef op 30 September 2003 @ 18:53:
Ben zelf ook nog wel opzoek naar een mooie CSS oplossing, maar denk idd dat die er niet is.
En om nou css te gaan parsen aan de hand van wat JS, daar zie ik ook niet echt veel in.

Toch is dat heel zo gek niet. Met een klein beetje script kan je IE prima hoogte laten afleiden uit top en bottom (en/of left en right), en meteen ff min-height support inbouwen. Dat je dan de onresize moet afvangen om het correct te houden vind ik dan maar een klein offer.

ala zoiets:

JavaScript:

window.onload = function() {
    var el = document.getElementById('test'); 
    fixIEAutoSize(el);      
}

function fixIEAutoSize(el) {
    var css = el.currentStyle; 
    if(!css) return;
    
    if(css.top && css.bottom) {
        el.style.height = el.parentElement.offsetHeight 
            - parseInt(css.top) - parseInt(css.bottom);
    }

    if(css.left && css.right) {
        el.style.width = el.parentElement.offsetWidth 
            - parseInt(css.left) - parseInt(css.right);
    }
}

met

Cascading Stylesheet:

html,body {
    width:100%;
    height:100%;
    margin:0;
    padding:0;
}

#test {
    background:#f0f0f0;
    border:1px solid silver;
    position:absolute;
    
    left:100px;
    right:100px;
    top:100px;
    bottom:100px;       
}

minHeight zit ook in de currentStyle, en die currentStyle is meteen je check, omdat dat toch IE only is.