Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: jednakowa strona w ie6, ie7, firefox - css
Forum PHP.pl > Forum > Po stronie przeglądarki
hrehor
zrobilem stronke, ktora ku mojemu zadowoleniu wyglada identycznie w ie6 i firefoxie (operze tez).
nie bylo latwo, ale dzieki selektorom '.element[class]' udalo sie przypisac odpowiednie style zarowno dla ie i ff.
cos mnie podkusilo zeby zobaczyc jak to bedzie wygladalo w ie7 - no i oczywiscie lipa.
(offtopic - przy instalacji ie7 uszkodzil mi windowsa, juz sie nie wlaczyl)

strona to www.photography.kw.pl
pozycjonowanie obrazkow wyglada dobrze w ie6 i ff, natomiast w ie7 vertical alignment juz nie dziala (jest top zamiast middle). pomocy :-)

kod css zostal 'zapozyczony' od kolegow z adobe (galeria html programu lightroom, np: www.switzerland.kw.pl)

  1. /* cell alignment */
  2. .alignmentOuter
  3. { z-index: 2; position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; }
  4. .alignmentOuter[class]
  5. { position: static; text-align: center; display: table; }
  6.  
  7. .alignmentMiddle
  8. { z-index: 3; position: absolute; top: 50%; left: 47%; } /* for explorer only*/
  9. .alignmentMiddle[class]
  10. { position: static; display: table-cell; vertical-align: middle; }
  11.  
  12. .alignmentInner
  13. { z-index: 4; position: relative; top: -50%; left: -50%; } /* for explorer only */
  14. .alignmentInner[class]
  15. { position: static; }
  16.  
  17. .AdjustZIndex
  18. { z-index: 4; position: relative; }
  19.  
  20. <div class="thumb">
  21. <div class="itemNumber">4</div>
  22. <div class="alignmentOuter">
  23. <div class="alignmentMiddle">
  24. <div class="alignmentInner">
  25. <div class="AdjustZIndex">
  26. <a href="fotka.php?id=2"><img src="src/thumbs/arch/DSC_2624.JPG" alt="TV tower" /></a>
  27. </div>
  28. </div>
  29. </div>
  30. </div>
  31. </div>


jak widac prawidlowe pozycjonowanie dla ff i ie6 wymaga sporo gimnastyki, a tu jeszcze ie7...
gekon
Zainteresuj się komentarzami warunkowymi. Można spokojnie pod każdą wersję IE zrobić inny kod CSS.
hrehor
Cytat(gekon @ 22.02.2007, 02:08:54 ) *
Zainteresuj się komentarzami warunkowymi. Można spokojnie pod każdą wersję IE zrobić inny kod CSS.


jak wypozycjonowac prawidlowo img w div pod ie7 nadal nie wiem
ale o komentarzach warunkowych tez nie wiedzialem, i daja ciekawe mozliowsci, np:
<!--[if IE ]>IE is evil, install Firefox and come back...<![endif]-->

pozdro
Hrehor
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.