Deel van website verdwijnt onder de browser, geen scrollbar

[Flying Bobman]

Hoi,

Tijdens het testen van de website waar ik mee bezig ben blijkt dat de site niet goed werkt in Android.
De site wordt verder correct getoond maar onderaan afgebroken (wat niet op het scherm past, zoals gewoonlijk), het probleem is dat er niet gescrolled kan worden om de rest te bekijken. Ik heb Chrome, Firefox 3 en 4, en IE8 verkleind om het probleem ook te reproduceren op de PC, maar in alle andere browsers komt wel gewoon een scrollbar als het venster te klein wordt in de hoogte. Ook op een ander Android toestel van een vriend van me werd de pagina afgebroken. Ik weet niet wat de iPhone doet.

Het gaat om deze website*.
De site is verder valid volgens w3, ook de css (/main.css).

Ik heb al wat kleine aanpassingen gedaan in de div structuur maar dat maakte niets uit.
Hoe kan ik er voor zorgen dat de pagina niet afgebroken wordt zonder scrollbar?

Bedankt,

Bob

*Tinyurl, ik wil liever niet dat Google deze pagina associeert met de website

[rusman]

Op de iPhone zelfde probleem. Misschien een missende sluitingstag ergens?

[Flying Bobman]

Nee, dat had ik al gecontroleerd. De pagina zou dan ook niet door de validator heen komen. Ik had al verwacht dat de iPhone het zelfde probleem zou hebben, de Android browser is ook op webkit gebaseerd. Toch doet Chrome het wel goed, ook een webkit browser...

[mcDavid]

Komt ongetwijfeld doordat die mobiele browsers niet goed omgaan met de overflow:auto op je wrapper. De scrollbalk die een normale browser laat zien is namelijk de scrollbalk van de wrapper, niet (zoals gewoonlijk) van de body.

Je zult dus een andere oplossing moeten verzinnen voor die achtergrond. Een losse div met 100% height, die NIET als wrapper fungeert ofzo.

offtopic:
Oh en google kijkt dwars door tinyurl heen hoor. En moderators ook.

[ Voor 18% gewijzigd door mcDavid op 19-10-2010 18:15 ]

[Flying Bobman]

Bedankt. Ik ga vanavond proberen of het anders kan. Wel vreemd want ik gebruik die overflow: auto voor meer websites en die werken gelukkig wel.

Het gaat er om dat de naam in de url hier niet staat, er zit een robots.txt op die Google verder blokkeert. Mag je geen tinyurl gebruiken hier?

[crisp]

Flying Bobman schreef op dinsdag 19 oktober 2010 @ 18:26:
Het gaat er om dat de naam in de url hier niet staat, er zit een robots.txt op die Google verder blokkeert. Mag je geen tinyurl gebruiken hier?

Jawel, alleen ons forum heeft een speciale feature die dergelijke url-verkorters volgt en de echte url als title bij de link plaatst - de link zelf wordt dus niet veranderd. Het grootste nadeel van url-verkorters is namelijk dat je als gebruiker niet meteen kan zien waar je op uit zal komen, dat vangen we dus op deze manier af.

[Flying Bobman]

Het werkt! Het was inderdaad de overflow zoals mcDavid noemde, bedankt
Vreemd dat mobiele browsers dat niet ondersteunen. Ik heb nu overflow weggehaald uit de wrapper (dan staat het op visible). De wrapper heb ik verder een hoogte van 100% meegegeven en de body een fixed background:

Cascading Stylesheet:

background: #93b2d6 url(images/bg_bottom.jpg) repeat-x fixed bottom;

Die fixed background zorgt dus voor het zelfde effect als de overflow: auto. Dat pakt Android wel, alleen niet heel vloeiend, maar dat maakt verder niet uit.