[CSS] Achtergrond van element verdwijnt

[Verwijderd]

Ik ben bezig met de ontwikkeling van een website die volledig is opgebouwd uit XHTML en gescheiden CSS. Voor deze website wilde ik gebruik maken van afgeronde hoeken en daarom heb ik behalve de header- en footerelementen ook h1-elementen gebruikt om hoeken weer te geven.

Dit alles werkt probleemloos in Firefox en over het algemeen ook in Internet Explorer, echter op het moment dat de onderzijde van de website tijdens het laden niet in het venster past wordt de achtergrond linksonder niet geladen als dit gedeelte bereikt wordt door te scrollen. Het is een beetje lastig om uit te leggen en daarom heb ik ter verduidelijking een screenshot toegevoegd:



Het gaat dus om het gedeelte met de rode omlijning, hier hoort gewoonlijk een achtergrond weergegeven te worden. Het probleem doet zich dus alleen voor als het onderste gedeelte niet in één keer op het scherm past, indien dat wel past wordt de achtergrond gewoon geladen.



Op het moment dat ik met mijn muis over het menu ga wordt de achtergrond ineens wel geladen en ziet het geheel er uit zoals het hoort.

De website is te bekijken op:
http://www.habermehl.net/rbtrotterdam/

Het betreffende stuk CSS is:

code:

#footer {

    background: url("../images/bottomleft.jpg") bottom left no-repeat;
    clear: left;
    padding: 0px;
    margin: 0px;
    text-align: right;
    margin: -1em 0px 0px 0px;

}

En het betreffende stuk HTML is:

code:

<div id="footer">
    
<h1></h1>
        
</div>

Waar zou dit probleem door veroorzaakt worden en hoe zou ik het op kunnen lossen?

[ Voor 4% gewijzigd door Verwijderd op 24-04-2006 13:53 ]

[Rekcor]

Eh... als ik op je site kijk doet hij 't perfect. Wat was de oplossing nu?

[ Voor 3% gewijzigd door Rekcor op 24-04-2006 14:32 ]

[Verwijderd]

Zoals ik al zei in mijn startpost doet het probleem zich alleen voor als de pagina langer is dan wat er in je browservenster past. Klik bijvoorbeeld op Contact, dan zal je zien wat het probleem is.

[Rowanov]

Maar dan nog doet hij het prima; welke versie van IE gebruik je om te testen?

[crisp]

Hier zie ik ook geen problemen in IE, maar dergelijke vage render-issues zijn meestal te voorkomen door in IE 'hasLayout' te forceren - bijvoorbeeld door een width of height op te geven.
Aangezien IE < 7 toch een element uitrekt doordat het height/width min-of-meer als min-height/width beschouwd kan je eenvoudig mbv conditional comments bijvoorbeeld een height:1%; toekennen.

[Verwijderd]

Het gebruik van conditional comments was niet nodig, een toekenning van een hoogtewaarde verhielp inderdaad het probleem en de website wordt nog steeds correct gerendered in FireFox. Bedankt crisp!