Osekaná záře v HTML5

Zdravím,
dělám web a narazil jsem na jeden problém. Chci na webu prezentaci fotek pomocí slideru (použil jsem www.jssor.com). Mám na stránce 3 základní tlačítka s vnější září, jenže když jsou tlačítka a slider na jedné stránce, tlačítka místo normálního stínu ukážou pouze část. První dvě tlačítka zobrazí stín jenom na bocích a třetí skoro vůbec. Zajímavé na tom je, že mi tenhle problém dělá jenom Chrome. Opera, Firefox a dokonce i IE to zobrazují správně. Napadá, prosím, někoho co by to mohlo být?

Přikládám dva screenshoty (330,331) s chybou a jeden (332), kde je tlačítko bez slideru.

Ukázka: stin

Za nápady předem děkuju

screenshot-330.png 129.12 KiB screenshot-331.png 123.22 KiB screenshot-332.png 124.75 KiB

Jsou zobrazeny jen nové odpovědi. Zobrazit všechny

Předmět	Autor	Datum
Co se vykašlat na tydle CSS hacky a udělat ty obrázky normálně v photoshopu? S tím, že na všechny po… Eessencia 20.06.2016 08:42	Eessencia	20.06.2016 08:42
Tohle jsem bohužel nikdy nedělal nebo jsem správně nepochopil, jak to myslíte mglaedr 20.06.2016 12:24	mglaedr	20.06.2016 12:24
Do jednoho obrázku dám vše např.: [http://pc.poradna.net/file/view/26189-button-1-png ] V CSS mu dám… Eessencia 20.06.2016 12:47	Eessencia	20.06.2016 12:47
Tak tohle jsem nikdy nedělal :D Ale zkusím to, jen nevím jak to půjde, protože ten web je dělaný tak… poslední mglaedr 20.06.2016 15:12	mglaedr	20.06.2016 15:12

Co se vykašlat na tydle CSS hacky a udělat ty obrázky normálně v photoshopu? S tím, že na všechny políčka v menu použiješ jen jeden img, aby nedocházelo k flickeringu, při najetí myši.

Tohle jsem bohužel nikdy nedělal nebo jsem správně nepochopil, jak to myslíte

Do jednoho obrázku dám vše např.:

V CSS mu dám velikost jednoho buttonu, což v tomto případě je 150px*49px a odpozicování vrchního, tedy (0;0)

width: 150px;
height: 49px;
background: no-repeat url('/images/menu/button.png') 0 0;

Pak použiju :hover efekt v CSS a jen změním odpozicování na druhou část obrázku, tedy snížím o 49px dolů.

width: 150px;
height: 49px;
background: no-repeat url('/images/menu/button.png') 0 -49px;

Takže na webu se to zobrazí takto
[http://pc.poradna.net/file/view/26190-1-png]
A po najetí myši takto

*Webové stránky jsem už pár let nedělal, takže omluv mé "trapné" pojmy :P

button-1.png 59.55 KiB 1.png 8.03 KiB 2.png 12.71 KiB

Tak tohle jsem nikdy nedělal :D Ale zkusím to, jen nevím jak to půjde, protože ten web je dělaný tak, aby se přizpůsoboval rozlišení a podle toho se i mění velikost obrázků. Tak snad v tom bude nějaká finta.

Zpět do poradny Odpovědět na původní otázku Nahoru