Thread: CSS sprite werkt niet in IE8?
-
25-08-2011, 00:27 #1Deactivated user
- Registered
- 14/08/10
- Location
- Diest
- Posts
- 2,419
- iTrader
- 1 (100%)
- Mentioned
- 0 Post(s)
- Reputation
- 8/16
CSS sprite werkt niet in IE8?
EDIT: solved: zie deze post
Ziet iemand waarom de css sprite niet werkt op de pijltjes om te navigeren en het kruisje om te sluiten in shadowbox? Klik hier op één van de leden hun naam en dan komt er een lightbox-achtige viewer op, maar in IE8 en minder werken die sprites niet. De afbeeldingen worden precies geresized om binnen de div te passen.
Hier een afbeelding van wat ik bedoel. Er worden dus twee pijltjes getoond ipv één.
Iemand die vindt hoe het komt?
Hier is de belangrijkste CSS code:
Ik denk dat het met volgend stukje code te maken heeft in het javascript document van shadowbox:Code:#sb-nav a{ display:block; float:right; height:16px; width:16px; margin-left:3px; cursor:pointer; background-repeat:no-repeat; } #sb-nav-close{ background-image:url(/sites/default/files/sluit.png); background-position: bottom center; } #sb-nav-close:hover{ background-image:url(/sites/default/files/sluit.png); background-position: top center; } #sb-nav-next{ background-image:url(/sites/default/files/volgend.png); background-position: top center; } #sb-nav-next:hover{ background-image:url(/sites/default/files/volgend.png); background-position: bottom center; } #sb-nav-previous{ background-image:url(/sites/default/files/vorig.png); background-position: top center; } #sb-nav-previous:hover{ background-image:url(/sites/default/files/vorig.png); background-position: bottom center; }
Een groter stuk uit het script:Code:progid:DXImageTransform.Microsoft.AlphaImageLoader
Ik weet echter niet wat die DXImageTransform.Microsoft.AlphaImageLoader doet - ja het scalet, maar wat scalet het allemaal? En kan ik het verwijderen? Zo niet: hoe zorg ik dat het m'n nav-afbeeldingen niet scalet?Code:T.init = function() { Q.appendHTML(document.body, s(T.markup, Q.lang)); T.body = ad("sb-body-inner"); aa = ad("sb-container"); ae = ad("sb-overlay"); Z = ad("sb-wrapper"); if (!x) { aa.style.position = "absolute" } if (!h) { var aG, K, S = /url\("(.*\.png)"\)/; aF(q, function(aI, aJ) { aG = ad(aJ); if (aG) { K = Q.getStyle(aG, "backgroundImage").match(S); if (K) { aG.style.backgroundImage = "none"; aG.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,src=" + K[1] + ",sizingMethod=scale);" } } }) } var aH; F(au, "resize", function() { if (aH) { clearTimeout(aH); aH = null } if (A) { aH = setTimeout(T.onWindowResize, 10) } }) };Last edited by -BVR-; 25-08-2011 at 01:00.
no votes
-
-
25-08-2011, 00:32 #2
Op mijn mac werkt alles perfect bij Safari en FF. Moest je dat nog niet weten... Wat er fout is aan je code zie ik ook niet. Sorry
no votes
-
25-08-2011, 00:36 #3Deactivated user
- Registered
- 14/08/10
- Location
- Diest
- Posts
- 2,419
- iTrader
- 1 (100%)
- Mentioned
- 0 Post(s)
- Reputation
- 8/16
Ja zo ver was ik al ...
no votes
-
25-08-2011, 00:37 #4
Bijmij werkt ook alles perfect!
MDMDumortier
no votes
-
25-08-2011, 00:45 #5Deactivated user
- Registered
- 14/08/10
- Location
- Diest
- Posts
- 2,419
- iTrader
- 1 (100%)
- Mentioned
- 0 Post(s)
- Reputation
- 8/16
Nogmaals: het gaat om IE8 en minder!!
Hier een afbeelding van wat ik bedoel. Er worden dus twee pijltjes getoond ipv één.no votes
-
25-08-2011, 00:59 #6Deactivated user
- Registered
- 14/08/10
- Location
- Diest
- Posts
- 2,419
- iTrader
- 1 (100%)
- Mentioned
- 0 Post(s)
- Reputation
- 8/16
EDIT: solved!
Die filter doet iets met alle .pngs die in shadowbox worden geladen omdat IE6 geen PNGs ondersteunt, en de filter ondersteunt geen background-position! Daarom heb ik besloten om IE6 niet te ondersteunen zodat er in IE7(+) alles er toch min of meer goed uitziet en dus met juiste sprites!
Verwijder dit stukje code uit de code en het is opgelost:
Code:if (!h) { var aG, K, S = /url\("(.*\.png)"\)/; aF(q, function(aI, aJ) { aG = ad(aJ); if (aG) { K = Q.getStyle(aG, "backgroundImage").match(S); if (K) { aG.style.backgroundImage = "none"; aG.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,src=" + K[1] + ",sizingMethod=scale);" } } }) }no votes
-
25-08-2011, 21:40 #7Approved 9-lifer
- Registered
- 20/08/09
- Location
- ...
- Posts
- 3,812
- iTrader
- 6 (100%)
- Mentioned
- 0 Post(s)
- Reputation
- 7/127
je kan dit eventueel ook eens proberen, maar IE6 support is voor niks goed. zeker niet voor uw site.
Gory, gory, what a hell of way to die.no votes
-
25-08-2011, 22:49 #8Approved 9liver
- Registered
- 04/06/11
- Location
- .
- Posts
- 1,585
- iTrader
- 16 (100%)
- Mentioned
- 0 Post(s)
- Reputation
- 6/11
no votes
-
26-08-2011, 11:55 #9Deactivated user
- Registered
- 14/08/10
- Location
- Diest
- Posts
- 2,419
- iTrader
- 1 (100%)
- Mentioned
- 0 Post(s)
- Reputation
- 8/16
Niet echt nee
In't totaal een 5% bezoekers gebruikt IE5.5-6, dus dat vond ik niet de moeite 
@GigaPixels: ja, ik heb dat altijd gebruikt denk ik
En zolang ik het zelf kan en niet beperkt wordt door een CMS zal ik dat altijd gebruiken. 
(Ik merk wel net dat het nogal stom is hoe ik het nu gebruik heb. Oke, ik heb de helft van de requests kunnen winnen, maar het zijn allemaal zulke kleine afbeeldingen dat ik ze beter allemaal in één sprite zet ipv verschillende. Da's iets voor deze avond want nnu moet ik leren! Damn them herexamens
)
Last edited by -BVR-; 26-08-2011 at 12:40.
no votes

