Hoi bhofkens,
Ja, in Internet Explorer 7 is er helemaal geen scrollbar rechts te zien, en kan je helemaal niet bij de onderste teksten komen.
En bij mij geeft deze pagina (en andere langere pagina's) ook in Firefox dubbele scrollbalken rechts.
Praktijk-info in Firefox met javascript
Maar met uitgeschakeld javascript gaat het goed met de scrollbars, terwijl nu de background van het tekstblok ontbreekt.
Praktijk-info in Firefox zonder javascript
De oorzaak blijkt een combinatie van factoren te zijn.
Nu loont het altijd de moeite om de broncode even goed te laten inspringen, zodat je kunt zien wat er aan de hand is. Dit gedaan met het tekstblok-gedeelte levert op:
HTML:
<div class="tekstblok">
<div class="tekstblokboven"></div>
<div class="tekstblokmidden">
<div class="kop">Praktijk informatie</div>
<div class="tekst-blok">
<p><font face="Calibri"><font size="3"></font></font></p>
<p><font face="Calibri"><font size="3">Dierenkliniek Dongemond is uw dierenarts voor goede zorg, ... enz. </p>
<p> </p>
</div>
<div class="addthis-icoontjes"><!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style">
<a class="addthis_button_favorites"></a>
<a class="addthis_button_facebook"></a>
<a class="addthis_button_hyves"></a>
<a class="addthis_button_google"></a>
<a class="addthis_button_twitter"></a>
<a class="addthis_button_linkedin"></a>
</div>
<!--<script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script>-->
<script type="text/javascript"
src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4fb60848466cd346"></script>
</div>
</div>
<div class="tekstblokonder"></div>
</div>
<div class="push"></div>
</div>
Nu staat er in de uit-gecommentarieerde script-regel:
HTML:
<!--<script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script>-->
... wat met een spatie tussen de
<!-- en de
<script ... hoort te zijn:
HTML:
<!-- <script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script>-->
... maar dat is het niet.
Dus maar eens de hele addthis-div met de social-media icoontjes uitgeschakeld, via:
HTML:
<div class="addthis-icoontjes" style="display: none;"><!-- AddThis Button BEGIN -->
Aha!
We kunnen concluderen:
- Het addthis-script interfereert met de pagina-opmaak, en heeft de dubbele scrollbalk-toestand op z'n geweten.
- Het css-model op zich is niet 100% in orde. Vermoedelijk heeft dat te maken met de constructie voor "de footer altijd onderop" in de css, waarbij allerlei manipulaties met de hoogte plaatsvinden, en er een speciale "push" <div> wordt aangebracht.
Nu zijn het allemaal vrij hoge pagina's in deze site, en heel erg nodig is zo'n footer-onderaan-het-scherm ook weer niet.
Dus we halen die constructie er uit, en brengen de rest op orde (het floaten van de inhoud zorgde voor het niet doortrekken van de background).
Ook zit het FAQ-blokje scheef in Internet Explorer 7:
In 1 moeite door zorgen we dat dat ook in orde komt (door alle margins en paddings van de <ul> en <li>'s expliciet vast te leggen; anders gaat IE ermee aan de haal).
Dat gaat goed!
Nu werd ik toch wel heel erg nieuwsgierig naar wat er zou gaan gebeuren bij terugplaatsen van de addthis-icoontjes. Dus de tijdelijke {display:none;} er weer uit!
- Test-resultaat: dongemond-nw-3.htm
- Firefox, Chrome, Opera, Safari en Internet Explorer 7 reageren hier goed op.
- Volgens Netrenderer.com IE8 en IE9 ook.
=======
Samengevat
Als je aan de css voor deze pagina helemaal onderaan toevoegt (of de verschillende onderdelen van de style.css aanpast):
Code:
body {
height: auto;
}
.tekstblok {
margin-bottom: 0;
}
.tekst-blok {
float: none;
}
.container {
min-height: 1%;
margin: 0 auto;
overflow: hidden;
}
.push { /* nu: clearing-div geworden :) */
height: auto;
clear: both;
}
.subblokmidden {
width: 179px;
padding: 10px;
}
.blok {
margin: 0;
padding: 0;
}
.blok li {
padding: 5px 0;
}
.blok-items {
display: block;
}
.adresblok {
margin-right: 0;
}
... zou het een stuk beter moeten gaan.
=============
Wat nog resteert
- De pagina's zijn ontzetten traag! Dat zit hem in de images die op enorme grootte moeten worden gedownload (bv. alleen al de konijntjes van de slidefoto's, die is 2.145*985px en 957kB), om vervolgens door de browser te moeten worden verkleind. Van de konijntjes blijft door het schalen maar 481*221px over.
Hier werden dus ... (2.145*985 - 481*221 = 2.112.825 - 106.301 =) 2.006.524 =
... ruim 2 miljoen pixels voor niets meegestuurd! En de browser wordt vreselijk aan het werk gezet om dat een beetje fatsoenlijk te downscalen.
Maak je dit image meteen tot 481*221px, dan heb je deze konijntjes van 18,6kB. Is < 2%, en scheelt dus ruim 900kB die niet gedownload hoeven te worden. Met nog een paar van deze in de slider loopt het in de MB's!
Bovendien kan een tekenprogramma beter schalen dan een browser (die nu 1:1 kan vertonen), en boek je ook nog kwaliteitswinst.
konijntjes van 2%
- Er zitten redelijk wat inline-styles in de html verwerkt, en soms ook niet van de beste soort (zoals <font face="Calibri">). Dat zouden mooie css-styles kunnen worden, en de <fonts> kunnen dan overboord gekieperd worden (zie hier waarom).
Maar ik zou eerst de images aanpakken. Daar zijn ook de bezoekers blij mee die niet direct in de broncode gaan zitten snuffelen.
Met vriendelijke groet,
CSShunter
