Autor Zpráva
lachim15
Profil
Zdravím, potřeboval bych znovu poradit. (vyřešeno)

Pomocí CSS sprite vykresluji klikatelné obrázky, které pomocí pomocí funkce v JS vykreslí obrázky další.

Ukázka jednoho řádku:
(Rozměry obrázku pro css sprite jsou 33px * 10095px)
<span class='obrazek craftovaci_bedna' onclick="app('...','');"></span>

.obrazek {
  background: url(/obrazky/crafting/crafting.jpg); 
  width: 31px; 
  height: 31px; 
  display: inline-block;
  border:2px solid #2b2b2b;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.craftovaci_bedna {background-position: -1px -232px;}

Na Chromu a Opeře se vykreslují obrázky správně:
http://nemesisup.cz/files/541/1-31.png
ale na Firefox(pár obrázků je rozmazaných):
http://nemesisup.cz/files/541/2-44.png
a IE (tady se zobrazuje bílí proužek na pravé straně a většian obrázků je rozmazaná):
http://nemesisup.cz/files/541/3-8.png

Nemá někdo nápad, jak by se to dalo opravit?

EDIT: Zkoušel jsem použít i namísto span, tag div, bohužel výsledek je stejný.
EDIT: Při změně oddálení stránky se obrázky zaostří / rozostří.


EDIT: Po několika hodinách jsem přišel na to, že to dělá css kód, který má za úkol mi vycentrovat stránku, nedá se to nějak obejít?
#dokupy {
height:100%;
width:820px;
margin:0 auto;
padding-top:60px;
}

EDIT: Firefox už frcí, pomohlo připsat no-repeat, teď jen zbývá Internet Explorer
.obrazek {
  background:url(/obrazky/crafting/crafting.jpg) no-repeat; 
  width: 31px; 
  height: 31px; 
  display: inline-block;
  border:2px solid #2b2b2b;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}

EDIT: IE taky frčí, hádalo se to s border-radius. Nečekal jsem, že na to příjdu sám a že bude chyba v tomhle. Někdy je koukám lepší vyzkoušet všechno :D

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm:

0