Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [css] CSS osobny dla każdej z przeglądarek
Kuziu
post
Post #1





Grupa: Zarejestrowani
Postów: 743
Pomógł: 0
Dołączył: 11.11.2003
Skąd: Toruń

Ostrzeżenie: (0%)
-----

Witam,
Już wysiadam z tymi stylami, co wstawię w FireFox'ie to pod IE źle co tu to tam...

Wpisuje margin:1px; W mozilli jest 1px w IE 2px no i wkońcu pomyślałem czy nie zrobić 2-3 styli dla IE / Firefox'a / Opery.

Pytanie tylko czy jest to dobre rozwiązanie. I czy Wy męczycie się z dostosowywaniem wszystkiego pod 1 CSS czy też robicie kilka wersji potem php'em wykrywacie jaka to przeglądarka i dajcie odpowiedni CSS.

(IMG:http://forum.php.pl/style_emoticons/default/tiredsmiley.gif)
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi
mike
post
Post #2





Grupa: Przyjaciele php.pl
Postów: 7 494
Pomógł: 302
Dołączył: 31.03.2004

Ostrzeżenie: (0%)
-----

Cytat(Kuziu @ 2006-04-03 14:59:10)
mike_mech robiłeś tak kiedyś ?

Pociąłem już wiele designów. Każdy zawsze dostawał alternatywne style dla badzIEwia.

Przykład:

[PHP] pobierz, plaintext 
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" >
  4.   <head>
  5. 	<style type="text/css">
  6. 	  html, body {
  7. 		  font: 11px Tahoma, Verdana, sans-serif;
  8. 	  }
  9.  
  10. 	  div {
  11. 		  margin: auto;
  12. 	  }
  13.  
  14. 	  div#siteContainer {
  15. 		  width: 500px;
  16. 		  padding: 10px 0 50px 0;
  17. 		  border: #f00 solid 1px;
  18. 	  }
  19.  
  20. 	  div#width200 {
  21. 		  width: 200px;
  22. 		  height: 13px;
  23. 		  background-color: #f00;
  24. 		  text-align: center;
  25. 		  color: #fff;
  26. 	  }
  27.  
  28. 	  div#width300 {
  29. 		  width: 300px;
  30. 		  height: 13px;
  31. 		  background-color: #00f;
  32. 		  text-align: center;
  33. 		  color: #fff;
  34. 	  }
  35.  
  36. 	  div.spacer {
  37. 		  height: 10px;
  38. 	  }
  39.  
  40. 	  div#box {
  41. 		  width: 200px;
  42. 		  height: 200px;
  43. 		  padding: 50px;
  44. 		  border: #f00 dashed 1px;
  45. 	  }
  46. 	</style>
  47.   </head>
  48.  
  49. <body>
  50.  
  51. <div id="siteContainer">
  52.  
  53.   <div id="width200">200px long</div>
  54.   <div id="width300">300px long</div>
  55.  
  56.   <div class="spacer"></div>
  57.  
  58.   <div id="box">
  59. 	Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem
     Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galle
    y of type and scrambled it to make a type specimen book. It has survived not only
     five centuries, but also the leap into electronic typesetting, remaining essenti
    ally unchanged. It was popularised in the 1960s with the release of Letraset shee
    ts containing Lorem Ipsum passages, and more recently with desktop publishing sof
    tware like Aldus PageMaker including versions of Lorem Ipsum.
  60.   </div>
  61.  
  62. </div>
  63.  
  64. </body>
  65. </html>
[PHP] pobierz, plaintext


Zerknij na wygląd w przeglądarce i "przeglądarce".
Widzimy dwa najczęściej pojawiające się problemy. Źle obliczona długość i nieumiejętność wycentrowania. Niby mało a strona rozwaliła się w drobny mak.

A wystarczy dodać w sekcji <head> (po powyżej deklaracji styli):
[HTML] pobierz, plaintext 
  1. <!--[if lte IE 6]>
  2.       <style type="text/css">
  3.         html, body {
  4.             text-align: center;
  5.         }
  6.  
  7.         div#box {
  8.             width: 300px;
  9.             text-align: left;
  10.         }
  11.       </style>
  12.     <![endif]-->
[HTML] pobierz, plaintext

... i strona wygląda jak powinna w każdej przeglądarce, nawet w badzIEwiu.

To niech mi teraz ktoś pokaże prostszą metodę (IMG:http://forum.php.pl/style_emoticons/default/tongue.gif)

----
Tak, wiem że jest tag [ php ] zamiast [ html ] Jak wiecie [ html ] żle formatuje wcięcia, dlatego aby je uwidocznić zastosowałem [ php ]
Go to the top of the page
+Quote Post

Posty w temacie
- Kuziu   [css] CSS osobny dla każdej z przeglądarek   3.04.2006, 08:12:49
- - revyag   Problem z podwójnym marginesem można rozwiązać nad...   3.04.2006, 08:30:26
- - spit   Oczywiście można zdefiniować dwa style, jeden dla ...   3.04.2006, 09:46:16
- - Kuziu   Jak to zrobić to wiem. Pytanie właśnie czy tak ro...   3.04.2006, 10:04:47
- - mike_mech   ~spit dlaczego nie polecasz tego rozwiązania? Moim...   3.04.2006, 13:54:43
- - Kuziu   Mogą sprawdzać czy np. nie mam słów kluczowych wpi...   3.04.2006, 14:59:10
- - mike_mech   Cytat(Kuziu @ 2006-04-03 14:59:10)mike_mech r...   3.04.2006, 15:32:41

« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Przełącz na: Standardowy · Przełącz na: Linearny+ · Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 15.10.2025 - 00:06
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn