Hoi FoBa,
Dat ziet er al een stuk beter uit dan dat het was! :thumb:
De shadow werkt in elke browser (safari, opera nog niet niet getest).
Dat is te zeggen:
- Hij werkt in de laatste Internet Explorer-versie: IE9.
- Hij werkt niet in IE7 en IE8 (op dit moment: samen meer dan de helft van de IE-bezoekers, waarin de schaduw niet werkt).
- Hij werkt in Chrome (laatste versie).
- Hij werkt niet in Safari 5.0.3 (waarschijnlijk wel in de laatste versie 5.1.4).
- Hij werkt niet in Firefox 3.6 (waarschijnlijk wel in de laatste versie(s)).
- Hij werkt in Opera (in ieder geval Opera-11.5 en hoger).
De oudere Firefox'en en Safari's kunnen het wel gaan doen met een kleine correctie. Er staat nu in de
hoofdstijl.css:
Code:
div#page {
...
moz-box-shadow: 0 0 5px 5px #888;
webkit-box-shadow: 0 0 5px 5px #888;
box-shadow: 0 0 5px 5px #888;
}
Dat moet zijn, met een streepje - voor de moz-box-shadow en de webkit-box-shadow:
Code:
div#page {
...
-moz-box-shadow: 0 0 5px 5px #888;
-webkit-box-shadow: 0 0 5px 5px #888;
box-shadow: 0 0 5px 5px #888;
}
Zorgenkindjes blijven dan nog IE7 en IE8: die kunnen gewoon niet op de css3-manier schaduwen maken.
==================
Cross-browser
Wil je IE7 en IE8 ook bedienen, dan moet overgestapt worden naar de eerder beschreven oplossing: een image met de schaduwen.
Stap 1
Daarvoor moeten eerst de drie regels met de box-shadow uit de div#page geschrapt worden (anders komen ze er in sommige browsers dubbel in te staan).
Stap 2
Voor het schaduwrandje onderaan de pagina is het 't makkelijkste om helemaal onderaan in de html-code even een extra <div> toe te voegen. Dan wordt het:
HTML:
...
<div id="footer">
<div class="page">
<ul id="foot">
<li>© Copyright 2012 Bart De Backer</li>
<li>Wandelclub 't Hoeksken Hamme</li>
</ul>
</div>
</div>
</div>
<div id="onderschaduw"><!-- ! --></div>
</body>
</html>
Stap 3
Nu kan de
hoofdstijl.css de benodigde instructies krijgen, door helemaal onderaan toe te voegen:
Code:
html { /* toevoegen: */
background: #f0f8ff;
}
body { /* toevoegen: */
width: 982px;
margin: 0 auto;
background: url(http://www.wandelclubthoeksken.be/thoeksken/images/hoeksken-schaduwen-combi.gif) repeat-y -982px 0;
}
#onderschaduw {
width: 982px;
height: 20px;
background: #f0f8ff url(http://www.wandelclubthoeksken.be/thoeksken/images/hoeksken-schaduwen-combi.gif) no-repeat 0 0;
}
Daarmee moet de zaak rond zijn.
O nee: het image nog!
Stap 4
Image uploaden naar de image-map.
Nu kunnen ook IE7 en IE8 er niet meer omheen: alle browsers tonen nu de schaduwrandjes.
Met vriendelijke groet,
CSShunter
____________
PS: Andere tip
Bovenin de html-code staat
<?xml version="1.0" encoding="UTF-8"?>.
Dat regeltje kan helemaal geschrapt worden.
Als het er in staat, schiet Internet Explorer namelijk in de "
quirksmode" (de fratsen-toestand), en kunnen hele rare dingen met de opmaak gaan gebeuren.
