witam,
czy ktoś może wie dlaczego strona: http://www.mogrodowski.pl/budman/ wygląda różnie w przeglądarkach Opera, Firefox i Chrome? Jedynie w Operze wygląda poprawnie.
Z góry dzięki za podpowiedzi.
witam,
czy ktoś może wie dlaczego strona: http://www.mogrodowski.pl/budman/ wygląda różnie w przeglądarkach Opera, Firefox i Chrome? Jedynie w Operze wygląda poprawnie.
Z góry dzięki za podpowiedzi.
Ciężko mi się debuguje w czymkolwiek innym niż Operze, a na niej akurat działa poprawnie, ale coś masz ładnie skopane od podstaw pewnie.
Nie wiem po co elementy #projekt_szary itd. mają ustalone tło, skoro w nich i tak masz obrazki - wywal to.
@dzek69: Ale i tak raczej nie będzie równo po wywaleniu tego niepotrzebnego tła -- obrazki będą wciąż nachodziły lekko na napis.
Troszkę tu igrasz z ogniem, @G1T. Używasz pozycjonowania bezwzględnego dla obrazków, ale nie definiujesz left
i top
, pozwalając, by obrazek pojawił się tam, gdzie pojawiłby się gdyby uczestniczył w normalnym przepływie dokumentu (jak przy position: static
), tyle że bez zajmowania miejsca w tym przepływie.
Element zawierający obrazki ma kosmiczne marginesy i wymiary ustalone tak, żeby niby to "normalne miejsce" dla obrazka wypadało tam, gdzie chcesz. Tyle że obrazki domyślnie mają display: inline
i nie są pozycjonowane jak elementy blokowe. Nadanie obrazkom display: block
mogłoby tu o dziwo pomóc, bo ujednolica pozycjonowanie obrazków w normalnym przepływie.
Prawdopodobnie lepiej by tu było użyć pozycjonowania bezwzględnego z left
i top
. Pamiętaj tylko, żeby element zawierający (takimi elementami są te divy z ID-kami) miał przynajmniej position: relative
. Z tego co widzę, to te elementy zawierające są tak wypozycjonowane, że obrazkom wystarczy wtedy dać left: 0; top: 0
.
@bswierczynski, dzięki za podpowiedź, wystarczyło nadać obrazkom własność display:block. Dzięki!
a czy może wiesz, dlaczego nie działa JavaScript w Chrome i Firefox? W Operze po najechaniu na napisy: PROJEKT, WYKONAWSTWO, SPRZEDAŻ obrazki powiększają się, natomiast w pozostałych już nie. Adres: www.mogrodowski.pl/budman/
Radzę też poczytać:
http://en.wikipedia.org/wiki/Unobtrusive_JavaScript
Bo generalnie unika się JS w znacznikach HTML :)
U mnie powiększanie obrazków działa jak się najedzie na obrazki, na napisy nie działa mi nigdzie.
zobacz jak wyglada twoja funkcja do powiekszania obrazkow:
function powieksz_obraz(dzial){
document.getElementById(dzial+'szary').style += "-webkit-transform:scale(1.4);-moz-transform:scale(1.4);-o-transform:scale(1.4);-ms-transform:scale(1.4); ";
document.getElementById('o'+dzial).style = "z-index:3";
}
wiesz co zwraca te wyrazenie w Firefoxie z powrotem?
document.getElementById(dzial+'_szary').style + "-webkit-transform:scale(1.4);-moz-transform:scale(1.4);-o-transform:scale(1.4);-ms-transform:scale(1.4); ";
zwraca ten String:
"[object CSSStyleDeclaration]-webkit-transform:scale(1.4);-moz-transform:scale(1.4);-o-transform:scale(1.4);-ms-transform:scale(1.4);"
Nie ma sie co dziwic, ze w Firefoxie to nie funktionuje.
Uzywasz JQuery, dlaczego nie zrobic za pomoca tego frameworku jakiejs animacji?