[html/css] Design bugje soms alleen bij laden van plaatje

[semicon]

Hallo,

Ik ben mijn site aan het vernieuwen qua desing. Iets totaal anders dan ik had. Ik loop alleen tegen nog 1 bugje aan waar ik maar niet uit kom. Het probleem is namelijk niet altijd aanwezig.

Als er een pagina (mijn site bevat foto's die ik gemaakt heb..) met een plaatje die moet laden dat zet hij mijn "footer" niet onderaan maar onderaan waar die stond toen de pagina mijn foto aan het laden was. Als dan het plaatje is uitgeladen zit mijn footer over mijn plaatje heen.

Voorbeeld waarbij het nog wel eens gebeurd: linkje
Het enige nadeel is, als jij hem nu opent, kan het zijn dat hij er gewoon goed uitziet, je moet dan gewoon even andere plaatjes aanklikken en wachten tot het zich voordoet (vooral verticale plaatjes hebben het).

Ik heb ook een linkje naar mijn CSS: linkje css

Mijn html is vrij eenvoudig gehouden, ik hou niet van IE hacks / javascripts die dingen fixen etc.. Al ontkom je niet aan "kleine" css hackjes.

Ik hoop dat het zo een beetje duidelijk is!



edit: om het een en ander te verhelderen, heb ik deze screenshots toegevoegd, dan zie wat er fout gaat!

bij de eerste keer laden:


Als het plaatje al in de cache staat, dus je drukt ff vernieuwen, dan doet hij het wel goed!:

[ Voor 13% gewijzigd door semicon op 07-08-2007 18:03 ]

[Cartman!]

Waarschijnlijk omdat de div waar ie inzit geen hoogte heeft. Mogelijke oplossing:

code:

_height:1%;
overflow:auto;

toevoegen aan de css van die div lost het denk ik op.

[semicon]

Over welke div hebben we het dan?

De footer? En is 1% niet een getal dat hem er raar uit laat zien?

edit: Ik probeer het op de content, en hij ziet er dan raar uit

[ Voor 26% gewijzigd door semicon op 07-08-2007 15:40 ]

[Cartman!]

Op de div waar de foto in zit, imageitem.

[semicon]

Hmm nope is het ook niet.. hij komt nog steeds gewoon door het plaajte. (met zowel _height: 1%; als height: 1%; geen idee wat die _ doet btw )

[Boelie-Boelie]

Volgens mij werkt het gewoon als je simpelweg die position:absolute weghaalt (en de bijbehorende bottom:0), want dan komt die #footer gewoon onder .imageitem.

_height is net als !important een CSS-hack voor IE en die moet je helemaal niet gebruiken. Beter is het probleem vermijden, of anders conditional comments gebruiken (waarmee je IE afwijkende regels serveert).

[semicon]

Boelie-Boelie schreef op dinsdag 07 augustus 2007 @ 17:41:
Volgens mij werkt het gewoon als je simpelweg die position:absolute weghaalt (en de bijbehorende bottom:0), want dan komt die #footer gewoon onder .imageitem.

_height is net als !important een CSS-hack voor IE en die moet je helemaal niet gebruiken. Beter is het probleem vermijden, of anders conditional comments gebruiken (waarmee je IE afwijkende regels serveert).

Dan werkt hij inderdaad.. alleen staat ie nooit helemaal onderaan! En dat wil ik nou juist (daarom dacht ik bottom:0, en als je dat wilt gebruiken moet je weer absolute, dus zo was ik erop gekomen)

[Boelie-Boelie]

semicon schreef op dinsdag 07 augustus 2007 @ 17:50:
alleen staat ie nooit helemaal onderaan!

Bij mij staat de footer gewoon onderaan de pagina? Verder naar onder gaat niet, er staat in de body nix onder footer, of je moet die padding van de footer wijzigen... Klopt dan toch? Snap anders niet wat je wilt bereiken.

[W.Wezz]

Zoieso staat er een </div> te veel tussen de "imageitem" en de "footer" table, kan natuurlijk wel, maar is niet zoals een webdever zoals jij dat zou willen zien, toch ex-collega, hihi!

ff verder zoeken...

[ Voor 62% gewijzigd door W.Wezz op 07-08-2007 18:01 ]

[semicon]

Als je werkt op een 1280x1024 dan staat hij nooit onderaan als in, echt onder aan je browser onderaan... maar wel onder je plaatje, dat is heel leuk als het plaatje groot is, of je pagina groter als je browserhoogte (dus als er een scrollbalk aanwezig is!) maar! als je pagina klein is, zoals bij veel horizontale plaatjes, en bij about of gear... dan zet hij het gelijk onder je text en niet onderaan je pagina (als in helemaal onderaan he!)


edit: Lol @wez, kijk beter... is gewoon goed.. mijn tabs staan niet heerlijk omdat ik met templates werk..
edit2: onderstaande reply is precies mijn probleem, ik heb boven ook een screenshot toegevoegd, maar als je nu nog een keer op die pagina komt, is het probleem weg..

[ Voor 23% gewijzigd door semicon op 07-08-2007 18:04 ]

[W.Wezz]

Voor de mensen die het allemaal corect zien, bij mij (1680x1050) zie je het dus zo:

http://www.weerdenburg.net/angelo.bmp

[W.Wezz]

semicon schreef op dinsdag 07 augustus 2007 @ 17:58:
edit2: onderstaande reply is precies mijn probleem, ik heb boven ook een screenshot toegevoegd, maar als je nu nog een keer op die pagina komt, is het probleem weg..

Klopt, en wanneer ik F11 ingedrukt houd zie ik een mooie witte balk om de footer heen geplaatst tussen het switchen van full screen en weer normaal scherm....

[Boelie-Boelie]

Ooo.. Je wilt een footer die onderaan de viewport blijft hangen bij weinig content, maar die onderaan de content komt bij veel content... Telkens 'onderaan' noemen maakte het niet erg duidelijk, maar ik snap het eindelijk.

Je zoekt zoiets als footerStickAlt? Let ook op dat je hierbij ff rekening moet houden met IE7.

[W.Wezz]

Is onderstaande een oplossing voor je???

<div class="imageitem">
<img src="shots/bloem_15.jpg" border="0" alt="0" class="border" id="img"></div>

</table>

</div>

<div id="footer">
<p style="word-spacing: 0px; margin-top: 0; margin-bottom: 0">
Template and images are copyright by AngeloMichel. © 2006-2007.
<a href="statistieken.asp"><img src="template/images/stats.gif" border="0" alt="statistieken"></a>.
</p>
</div>

[semicon]

'tis echt een nasty klein bugje, krijg em maar niet weg... (vandaar deze voorzichtige kick )

kheb nu mijn "oude" versie eigenlijk erop (die van gistermiddag) en die laat ik nu staat.. totdat iemand misschien een oplossing weet want snap er echt niks van...

[ Voor 8% gewijzigd door semicon op 08-08-2007 17:18 . Reden: de kick ]