Search code examples
csspngscalingsprite-sheet

Spritesheet PNG shown at different position on live website

For some reason the images (from a sprite sheet) on my live website are positioned differently to the local version. Its driving me crazy! On inspecting the element it seems the spritesheet is being scaled slightly differently when live, which is shifting the images further right than I want. Any ideas why?

Many thanks in advance!

The HTML:

    <div id="icon-container">
 <div class="icon">
    <a class="stretchy">
                    <img class="spacer" alt="icon" src="images/assets/spacer.png">
                    <img class="sprite s" alt="" src="images/assets/spritesheet.png">
    </a>            
    <a class="stretchy">
                    <img class="spacer" alt="icon" src="images/assets/spacer.png">
                    <img class="sprite s2" alt="" src="images/assets/spritesheet.png">
    </a>            
    <a class="stretchy">
                    <img class="spacer" alt="icon" src="images/assets/spacer.png">
                    <img class="sprite s3" alt="" src="images/assets/spritesheet.png">
    </a>    
    <a class="stretchy">
                    <img class="spacer" alt="icon" src="images/assets/spacer.png">
                    <img class="sprite s4" alt="" src="images/assets/spritesheet.png">
    </a>            
    <a class="stretchy">
                    <img class="spacer" alt="icon" src="images/assets/spacer.png">
                    <img class="sprite s5" alt="" src="images/assets/spritesheet.png">
    </a>    
    <a class="stretchy">
                    <img class="spacer" alt="icon" src="images/assets/spacer.png">
                    <img class="sprite s6" alt="" src="images/assets/spritesheet.png">
    </a>            
    <a class="stretchy">
                    <img class="spacer" alt="icon" src="images/assets/spacer.png">
                    <img class="sprite s7" alt="" src="images/assets/spritesheet.png">
    </a>            
    <a class="stretchy">
                    <img class="spacer" alt="icon" src="images/assets/spacer.png">
                    <img class="sprite s8" alt="" src="images/assets/spritesheet.png">
    </a>    
    <a class="stretchy">
                    <img class="spacer" alt="icon" src="images/assets/spacer.png">
                    <img class="sprite s9" alt="" src="images/assets/spritesheet.png">
    </a>            
    <a class="stretchy">
                    <img class="spacer" alt="icon" src="images/assets/spacer.png">
                    <img class="sprite s10" alt="" src="images/assets/spritesheet.png">
    </a>        
    <a class="stretchy">
                    <img class="spacer" alt="icon" src="images/assets/spacer.png">
                    <img class="sprite s11" alt="" src="images/assets/spritesheet.png">
    </a>            
    <a class="stretchy">
                    <img class="spacer" alt="icon" src="images/assets/spacer.png">
                    <img class="sprite s12" alt="" src="images/assets/spritesheet.png">
    </a>            
    <a class="stretchy">
                    <img class="spacer" alt="icon" src="images/assets/spacer.png">
                    <img class="sprite s13" alt="" src="images/assets/spritesheet.png">
    </a>    
    <a class="stretchy">
                    <img class="spacer" alt="icon" src="images/assets/spacer.png">
                    <img class="sprite s14" alt="" src="images/assets/spritesheet.png">
    </a>            
    <a class="stretchy">
                    <img class="spacer" alt="icon" src="images/assets/spacer.png">
                    <img class="sprite s15" alt="" src="images/assets/spritesheet.png">
    </a>            
</div>
</div>

The CSS:

.stretchy {display:block; position:relative; overflow:hidden; max-width:400px; }

.stretchy .spacer { width: 100%; height: auto; }
.stretchy .sprite {
     position:absolute; top:-5px; left:0; max-width:none; max-height:100%;
 }
.stretch img { width: 100%; }

.stretchy .sprite.s2 {left:-103%;}
.stretchy .sprite.s3 {left:-205%;}
.stretchy .sprite.s4 {left:-307%;}
.stretchy .sprite.s5 {left:-407%;}
.stretchy .sprite.s6 {left:-508%;}
.stretchy .sprite.s7 {left:-608%;}
.stretchy .sprite.s8 {left:-709%;}
.stretchy .sprite.s9 {left:-811%;}
.stretchy .sprite.s10 {left:-911%;}
.stretchy .sprite.s11 {left:-1012%;}
.stretchy .sprite.s12 {left:-1113%;}
.stretchy .sprite.s13 {left:-1216%;}
.stretchy .sprite.s14 {left:-1318%;}
.stretchy .sprite.s15 {left:-1418%;}

Local website

Live website

Solution

  • the .icon class has a width of 20% which is wider than the pocket .parallelogram on my screen. The scaling of the pocket should be in sync with the icon scaling ... otherwise the pocket will be too small or out of center in comparison to the icons.

    Edit: here is a jsfiddle for trying out stuff: http://jsfiddle.net/adnrz/ With the media queries at some point you scale the pocket but not the icons anymore hence the pockets gets draged to the side. And on the smalest screen size you dont cut the icons on the right place, so you display two half-icons.