1. #1

    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:

    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;
    }
    Ik denk dat het met volgend stukje code te maken heeft in het javascript document van shadowbox:
    Code:
    progid:DXImageTransform.Microsoft.AlphaImageLoader
    Een groter stuk uit het script:
    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)
                }
            })
        };
    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?
    Last edited by -BVR-; 25-08-2011 at 01:00.
    no votes  

  2. #2

    Registered
    24/08/11
    Location
    Elewijt
    Posts
    165
    iTrader
    0
    Mentioned
    0 Post(s)
    Reputation
    0/0
    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  

  3. #3

    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  

  4. #4
    MDMDumortier's Avatar
    Registered
    18/12/08
    Location
    zwevegem
    Posts
    19
    iTrader
    0
    Mentioned
    0 Post(s)
    Bijmij werkt ook alles perfect!
    MDMDumortier
    no votes  

  5. #5

    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  

  6. #6

    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  

  7. #7
    Dastardly's Avatar
    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  

  8. #8
    GigaPixels's Avatar
    Registered
    04/06/11
    Location
    .
    Posts
    1,585
    iTrader
    16 (100%)
    Mentioned
    0 Post(s)
    Reputation
    6/11
    CSS sprites.. gelukkig gebruiken mensen dat nog! (Y)
    9lives' hack fiasco: 1 | 2 | 3
    no votes  

  9. #9

    Registered
    14/08/10
    Location
    Diest
    Posts
    2,419
    iTrader
    1 (100%)
    Mentioned
    0 Post(s)
    Reputation
    8/16
    Quote Originally Posted by Dastardly View Post
    This quote is hidden because you are ignoring this member. Show
    je kan dit eventueel ook eens proberen, maar IE6 support is voor niks goed. zeker niet voor uw site.
    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  

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Log in

Log in