[CSS/XHTML] Element height 100%

[plofkip]

He bah!

Jullie zullen wel denken, alwéér een probleem met height: 100%.... Inderdaad!
Ik ben hier nu 3 uur zoet mee geweest en nu vind ik het tijd om het aan jullie voor te leggen:

Het betreft de volgende pagina: http://dev.yournewspage.c...estlink.com/BlogPage.aspx
Zoals je ziet is er een table met 3 td's: de linker kolom, de blauwe balk in het midden en de rechter kolom.
De linker- en rechter kolom bestaan op hun beurt weer uit een table, met +/- 4 ~ 5 rijen.

Ik zou graag de actieknoppen/tijd, de titel en de onderste rij van de 2 buitenste kolommen naast elkaar hebben staan, dus de body van het bericht moet de overige ruimte opvullen.
Uiteraard gebeurt dit ook netjes in Firefox, maar niet in IE(7)

Wat ik heb geprobeerd:

• De td's binnen zo'n post veranderen in DIV's, maar dit verhelpt het niet
• Heel veel gekloot met alle parent elementen (position: relative, position: absolute, height: 100%)
• Veel op internet gezocht en gelezen (quirks mode is not an option!)

Kunnen jullie mij alsjeblieft helpen met dit irritante probleem?

[_Thanatos_]

Over het algemeen, wat ik altijd doe in zo'n geval:
- html en body een height:100% geven
- geen table layouts
- xhtml 1.0 strict gebruiken

Geen idee of dat laatste quirks mode activeert, die woelige IE-term weiger ik te begrijpen. Maar het werkt wel.

[Verwijderd]

Door de XML-proloog (die aanwezig is in jouw pagina) schiet IE direct in Quirks Mode.

[Kiphaas7]

_Thanatos_ schreef op dinsdag 22 april 2008 @ 04:08:
Over het algemeen, wat ik altijd doe in zo'n geval:
- html en body een height:100% geven
- geen table layouts
- xhtml 1.0 strict gebruiken

Geen idee of dat laatste quirks mode activeert, die woelige IE-term weiger ik te begrijpen. Maar het werkt wel.

Die laatste is overdreven en onnodig, een valid doctype gebruiken is meer dan genoeg.

Wikipedia: Quirks mode

[RutgerB]

Je zou javascript kunnen gebruiken om de height zelf uit te rekenen.

[plofkip]

_Thanatos_ schreef op dinsdag 22 april 2008 @ 04:08:
Over het algemeen, wat ik altijd doe in zo'n geval:
- html en body een height:100% geven
- geen table layouts
- xhtml 1.0 strict gebruiken

Geen idee of dat laatste quirks mode activeert, die woelige IE-term weiger ik te begrijpen. Maar het werkt wel.

- Body + html height 100% heb ik gedaan
- Ik heb het ook met div's geprobeerd
- het is xhtml 1.0 strict

De pagina wordt niet in quirks mode gerendered. Als ik dat wel doe werkt het juist wel, maar dan komt de table niet meer in het midden van de pagina en worden de plaatjes van het menu veel te klein gemaakt...

[plofkip]

Heb het opgelost met JS.

Eerst een browser detection, als het IE is doe ik de volgende code uitvoeren:

JavaScript:

var a_elements = Array();
a_elements = getElementsByClass("a_body");
var p_elements = Array();
p_elements = getElementsByClass("p_body");
for(i = 0; i < a_elements.length; i++)
{
    var a_height = getComputedHeight(a_elements[i]);
    var p_height = getComputedHeight(p_elements[i]);
    if(a_height > p_height)
    {
        setHeight(p_elements[i], a_height);
    }
    else if(a_height < p_height)
    {
        setHeight(a_elements[i], p_height);
    }
}

function getElementsByClass(theClass) {
    var allPageTags = new Array();
    var pageTagsWithClass = new Array();
    //Populate the array with all the page tags
    var allPageTags = document.getElementsByTagName("div");
    //Cycle through the tags using a for loop
    for (i = 0; i < allPageTags.length; i++) {
        //Pick out the tags with our class name
        if (allPageTags[i].className == theClass) {
            //Manipulate this in whatever way you want
            pageTagsWithClass.push(allPageTags[i]);
        }
    }
    
    return pageTagsWithClass;
}

function getComputedHeight(theElt)
{
    if(is_ie){
            tmphght = theElt.offsetHeight;
    }
    else{
            docObj = theElt;
            var tmphght1 = document.defaultView.getComputedStyle(docObj, "").getPropertyValue("height");
            tmphght = tmphght1.split('px');
            tmphght = tmphght[0];
    }
    return tmphght;
}

[plofkip]

Een medestudent had het ook over de CSS eigenschap "clear: both".
Dat ik een div onder de description-div moet zetten met die eigenschap, maar dit lukt mij niet 123...
Iemand een idee wat hij bedoelt en of dat werkt?