[CSS] minimale hoogte child doorgeven aan parent - Softwareontwikkeling

dinsdag 24 januari 2006 02:16

Acties:

Topicstarter

Excuses voor de lange openingspost, maar hij is eenvoudig te lezen, omdat het probleem stap voor stap wordt uitgelegd.

Ik heb een eenvoudige opzet bestaande uit 3 kolommen. De html-pagina is opgebouwd uit 3 div-elementen: een menu (blauw), een div met de eigenlijke paginatekst (groen) en een div met een slideshow (geel). Deze divs zijn opgenomen in een wrapper (rood). Met css style ik deze pagina zó dat de getoonde volgorde (van links naar rechts) slideshow, menu en tekst is:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" 
        content="text/html; charset=ISO-8859-1" />
    <meta http-equiv="imagetoolbar" content="no" />
    <title>Paginatitel</title>

    <link rel="stylesheet" href="test00.css" type="text/css" />
</head>

<body> 
    <div id="middenSectie">
        <div id ="rubriekMenu">
            Menu
        </div>
        <div id="hoofdInhoud">
            <p>
                Lorem ipsum dolor sit amet... 
            </p>
        </div>  
        <div id="slideshow">
            Slideshow
        </div>
    </div>
</body>

</html>

Cascading Stylesheet:

html, body {
    padding: 0;
    margin: 0;
    border: 0;
}

body {
    background-color : White;
    color: Black;
}


div#middenSectie {
    position: relative;
    clear: both;
    padding: 0;
    margin: 0 auto;
    border: 0;  
    width: 765px;
    background-color: Red;
}

div#rubriekMenu {
    position: absolute;
    top: 0px;
    left: 230px;
    
    width: 110px;

    background-color: Blue;
    color: White;
}


div#hoofdInhoud {
    position: relative; 

    margin-left: 360px;

    background-color: Green;
    color: White;
}

div#slideshow {
    position: absolute;
    top: 0;
    left: 0;
    
    width: 228px;
    height: 305px;
    
    padding: 0;
    margin: 0;
    margin-right: 535px;
    
    background-color: Yellow;   
}

Nou, dat werkt prima zou je zeggen. Inderdaad prima bij een lange tekst, maar als de tekst kort is niet. Kijk maar:
lange tekst
korte tekst
bijbehorende css

Zowel in Internet Explorer(IE) 6 ,FireFox(FF) 1.5 als in Opera(OP) 8.51 is er een probleem: de hoogte van de child-div 'slideshow' (geel) wordt niet doorgegeven aan de parent-div 'middenSectie'', de wrapper dus (rood).
Stap voor stap zal ik hiervoor een oplossing geven, althans dat probeer ik:

stap 1: min-height toevoegen
De css wordt als volgt aangepast:

Cascading Stylesheet:

div#middenSectie {
    (-knip-) 
    min-height: 305px;
}

Resultaat:
lange tekst
korte tekst
bijbehorende css
Prima oplossing voor moderne browsers als FF en OP, maar dus niet voor IE. Dit is ook logisch, omdat deze eigenschap niet door IE wordt ondersteunt.

stap 2: height toevoegen
We geven de parent een hoogte, die nodig is voor IE:

Cascading Stylesheet:

div#middenSectie {
    (-knip-) 
    min-height: 305px;
    height: 305px;
}

Resultaat:
lange tekst
korte tekst
bijbehorende css
Ok, IE werkt nu prima, maar nu geven FF en OP weer problemen. De tekst schiet de rode parent uit. Dit klopt ook wel, want de standaardwaarde voor overflow is 'auto'. Maar ik wil geen scrollbar of iets dergelijks, ik wil dat de hoogte van de parent zich aanpast.

stap 3: *>-hack gebruiken
Er moet dus een oplossing gezocht worden om bij IE de height te gebruiken, en bij FF/OP de min-height. Die is er:

Cascading Stylesheet:

div#middenSectie {
    (-knip-) 
    min-height: 305px;
    height: 305px;
}

*>div#middenSectie
    height: auto;
}

Resultaat:
lange tekst
korte tekst
bijbehorende css
Alles lijkt nu te werken, prima. Maar nu blijkt deze hack niet te werken in IE 5 Mac, een browser die toch nog weleens wordt gebruikt. Ik baseer me op de info van quirksmode.org.

stap 4: commented backslash hack gebruiken
Nu bestaat er een hack om IE 5 Mac uit te sluiten, de zogenaamde commented backslash hack. De css kan er dan zo uit komen te zien:

Cascading Stylesheet:

div#middenSectie {
    (-knip-) 
    min-height: 305px;
    height: 305px;
}

div#middenSectie,
*>div#middenSectie {
    height: 305px;
}
/* bovenstaande hoogte wordt gebruikt door IE 5 Mac \*/

div#middenSectie,
*>div#middenSectie {
    height: auto;
}
/* bovenstaande hoogte wordt gebruikt door moderne browsers, 
    maar niet door IE */

Resultaat:
lange tekst
korte tekst
bijbehorende css
Dit lijkt een goede oplossing te zijn, echter kan ik zelf momenteel niet testen op IE 5 Mac.

Wat-o-wat is nu mijn vraag?
Concreet heb ik de volgende vragen:

Werkt de oplossing in alle (gangbare) browsers?
Welke alternatieven zijn er voor de gekozen oplossing?
Wat zijn de voor- en de nadelen van die alternatieven?
Is 'mijn' oplossing niet te omslachtig?

Ik ben dit probleem al eens vaker tegengekomen, maar niet eerder ben ik tegen een echte oplossing aangelopen.
Dus... deel je kennis hier GoT en help elkaar verder!

dinsdag 24 januari 2006 09:46

Acties:

crisp

Devver

Pixelated

Je zou wellicht ook kunnen kijken of absolute positioning van je slideshow wel noodzakelijk is; dat is immers de oorzaak van je probleem omdat je daarmee dat element uit de flow haalt.

IE5 voor de Mac is overigens op sterven na dood

Intentionally left blank

woensdag 25 januari 2006 07:47

Acties:

ZeilDude

Topicstarter

crisp schreef op dinsdag 24 januari 2006 @ 09:46:
Je zou wellicht ook kunnen kijken of absolute positioning van je slideshow wel noodzakelijk is; dat is immers de oorzaak van je probleem omdat je daarmee dat element uit de flow haalt.

IE5 voor de Mac is overigens op sterven na dood

Ik weet geen andere manier om stijlloos een andere volgorde van div te gebruiken, dan mét stijl. Vandaar de absolute positionering. En inderdaad, daardoor wordt die hoogte niet meegegeven.

Iemand anders suggesties?

Ik kan natuurlijk de stylesheet ook wel gewoon zo houden:

Cascading Stylesheet:

div#middenSectie {
    (-knip-) 
    min-height: 305px;
}

En dan na de stijlsheet dit opnemen:

HTML:

<!--[if lt IE 7]>
    <style type="text/css">
        div#middenSectie { height: 305px;}
    </style>
<![endif]-->

Is wellicht een nettere oplossing. Het probleem lijkt zich tenslotte allen in IE Windows voor te doen, en deze conditional statement werkt aleen in IE Windows (en dus niet in IE Mac).

Resultaat:
lange tekst
korte tekst
bijbehorende css
css voor IE

[ Voor 53% gewijzigd door ZeilDude op 25-01-2006 17:22 ]

Reageer