Div fixed, werkt niet in IE6 - Softwareontwikkeling

maandag 25 juni 2007 08:17

Acties:

Verwijderd

Topicstarter

Hoi,

Ben nog steeds bezig met een portfolio site. Probleempje weer met IE6. Wil boven en onder een balk plaatsen die altijd vast staan in beeld, scrollen dus mee. Werkt goed in IE7, FF2. IE6 loopt te kutten. Daar blijven de balken niet boven en onder in het scherm maar zet ze neer als elke andere div.

Cascading Stylesheet:

body, html {
    font-family: Tahoma, Geneva, Arial;
    font-size: 11px;
    margin: 0;
    color: #363636;
    background: url(../images/body_bg.gif) repeat-y center;
    letter-spacing: 1px;
    height: 100%;   
    overflow: auto;
}

#slogan {
    width: 100%;
    height: 32px;
    background: url(../images/slogan_bg.png) center;
    position: fixed;
    top: 0px;
    behavior: url(iepngfix.htc);
}

#slogancontent {
    width: 760px;
    margin: 0 auto;
    color: #fff;
    font-style: italic;
    padding-top: 2px;
}

#footer {
    width: 100%;
    height: 32px;
    background: url(../images/footer_bg.png);
    position: fixed;
    bottom: 0px;
    color: #fff;
    behavior: url(iepngfix.htc);
}

#footer a, #footer a:visited {
    color: #bcdaff;
    text-decoration: none;
    padding-left: 3px;
    padding-right: 3px;
}

#footer a:hover, #footer a:active {
    color: #fff;
}

#footercontent {
    padding-top: 16px;
    width: 760px;
    margin: 0 auto;
}

#footerleft {
    float: left;
    width: 350px;
    padding-left: 3px;
}

#footerright {
    float: left;
    width: 407px;
    text-align: right;
}

HTML:

<body>
    <div id="slogan">       
            <div id="slogancontent">            
                "Specialist in designing en user-interfaces."       
            </div>      
    </div>  
    <div id="footer">   
        <div id="footercontent">        
            <div id="footerleft">           
                Copyright &copy; 2006 - 2007 by Rudolf Bos  
            </div>          
            <div id="footerright">          
                <a href="#"> html valid </a> | <a href="#"> css valid </a>          
            </div>      
        </div>  
    </div>
</body>

Voorbeeld:
http://www.rudolfbos.nl/v2/

Misschien iets met de positioning?

maandag 25 juni 2007 08:33

Acties:

crisp

Devver

Pixelated

simpel: IE6 ondersteund gewoonweg geen position: fixed

Intentionally left blank

maandag 25 juni 2007 08:56

Acties:

Verwijderd

Topicstarter

Aha, duidelijk! Is er er voor IE6 wel een mogelijkheid om layers over elkaar te plaatsen? Zodat de #container onder de #slogan en #footer komt te liggen als het ware?

[ Voor 6% gewijzigd door Verwijderd op 25-06-2007 09:05 ]

maandag 25 juni 2007 09:32

Acties:

Verwijderd

ja hoor, als je div's later in de object flow plaatst zal deze met position: absolute over andere div's geplaatst worden.

Als het bovenstaande geen optie is kun je altijd spelen met z-index.

maandag 25 juni 2007 09:35

Acties:

gertvdijk

Persoonlijk vind ik het geen mooie oplossing, omdat hier in FF2 zelfs boven- en onderkant van de scrollbalk verdwijnt als ik het venster verticaal heel klein maak. En ik vind een footer die blijft plakken bij scrollen ook niet 'mooi'. Tot zover mijn mening. Wat ik je kan aanraden, en wat ook werkt in IE6, is de truc Footerstick.

Kia e-Niro 2021 64kWh DynamicPlusLine. 3x Victron MP-II op 15kWh US5000 3f thuisbatterij met 3x25A→3x40A PowerAssist, Victron EVCS, 3200Wp HoyMiles zp. my GitHub, my blog

maandag 25 juni 2007 12:04

Acties:

Boelie-Boelie

Zou eens naar de verschillende layouts op CSSplay kijken.. Diverse layouts met fixed header en footer.

Cogito ergo dubito

maandag 25 juni 2007 12:38

Acties:

Verwijderd

Ik gebruik (bijna)nooit position: absolute, je kunt de mooiste layouts maken met relative en floats.

Zoek maar eens op "fluid-layouts".