CSS Sprite не делает правильно в браузере

Question

Вот мой Sprite: http://crystalise.tw/crystaliseTW/icons/sprite.png

Когда я пытаюсь его на сайт, как здесь: http://crystalise.tw

Это не показано должным образом, когда я использую Firefox и Chromium браузер.

В чем проблема?

Это из моего CSS:

.sprite { background: url('../icons/sprite.png') no-repeat top left; width: 64px; height: 64px; } 
.sprite.blogger { background-position: 0px 0px; } 
.sprite.flickr { background-position: 0px -64px; } 
.sprite.github { background-position: 0px -128px; } 
.sprite.heart { background-position: 0px -192px; } 
.sprite.linkedin { background-position: 0px -256px; } 
.sprite.magnolia { background-position: 0px -320px; } 
.sprite.pinterest { background-position: 0px -384px; } 
.sprite.skype { background-position: 0px -448px; } 
.sprite.so { background-position: 0px -512px; } 
.sprite.youtube_64 { background-position: 0px -576px; } 

Answer 1

Проблема ваша нав только 700px в ширину. У вас есть 10 навигационных элементов, каждый из которых имеет 64px (ширина) + 22px (margin), что составляет 860px в ширину, 160 пикселей слишком велико. Я бы рекомендовал уменьшить правый край навигационных элементов> div или увеличить ширину вашего навигатора. Наконец, ваш последний div на nav, вероятно, не нуждается в правом поле, поэтому используйте что-то вроде этого: nav> div: last-child { margin-right: 0; }