Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS]Niewłaściwe wyświetlanie ramki przez Chrome i Firefox
Forum PHP.pl > Forum > Przedszkole
Teppic
30.03.2012, 17:14:06
Moich testów i nauki css ciąg dalszy;).

Aby przetestować swoją wiedzę postanowilem napisać w css ładną ramkę z danymi. Oto plik z css:

[PHP] pobierz, plaintext 
  1. html body{
  2. margin: 0 auto;
  3. text-align: center;
  4. }
  5.  
  6. .boks{ // to jest ta duza ramka z czerwonym obramowaniem
  7. width: 600px;
  8. border-style: solid;
  9. border-color: red;
  10. margin: 100px auto;
  11. border-width: 20px 1px 1px 1px;
  12. }
  13.  
  14. .boksw{ //ramka wewnętrzna, która "trzyma" w sobie 2 ramki: "lewa" z cyfrą i "prawa" z tekstem
  15. padding-top: 10px;
  16. width: 100%;
  17. border: 0;
  18. margin: 0;
  19. }
  20.  
  21. .prawa{
  22. width: 95%;
  23. float: left;
  24. text-align: left;
  25. display:inline;
  26. }
  27.  
  28. .zprawa{ // akapit "p" formatujący tekst w ramce "prawa"
  29. font-size: 14px;
  30. color: silver;
  31. margin: 3px 0 0 0;
  32. }
  33.  
  34. .lewa{
  35. text-align: right;
  36. width: 5%;
  37. float: left;
  38. display:inline;
  39. }
  40.  
  41. .zlewa{ // akapit "p" formatujący tekst w ramce "lewa" czyli te cyferki
  42. margin: 0 7px 0 0;
  43. color: red;
  44. font-size: 20px;
  45. font-weight: bold;
  46. }
[PHP] pobierz, plaintext


A to jest kod strony:

[PHP] pobierz, plaintext 
  1. <html><head>
  2. <link rel="stylesheet" type="text/css" href="index.css" />
  3. </head>
  4. <body>
  5.  
  6. <div class="boks">
  7.  
  8. <div class="boksw">
  9. <div class="lewa"><p class="zlewa">1.</p></div>
  10. <div class="prawa">
  11. <p class="zprawa">Na komisariacie zeznaja trzej swiadkowie bojki. Pierwszy zeznaje murzyn :
  12.  - Ja nic nie wiedziec. Ja jechac sobie spokojnie autobusem, az tu nagle dostac najpierw w twarz od jednego, a potem od drugiego.</p>
  13. </div></div>
  14.  
  15.  
  16.  
  17. <div class="boksw">
  18. <div class="lewa"><p class="zlewa">2.</p></div>
  19. <div class="prawa">
  20. <p class="zprawa">Na komisariacie zeznaja trzej swiadkowie bojki. Pierwszy zeznaje murzyn :
  21.  - Ja nic nie wiedziec. Ja jechac sobie spokojnie autobusem, az tu nagle dostac najpierw w twarz od jednego, a potem od drugiego.</p>
  22. </div></div>
  23.  
  24.  
  25. <div class="boksw">
  26. <div class="lewa"><p class="zlewa">3.</p></div>
  27. <div class="prawa">
  28. <p class="zprawa">Na komisariacie zeznaja trzej swiadkowie bojki. Pierwszy zeznaje murzyn :
  29.  - Ja nic nie wiedziec. Ja jechac sobie spokojnie autobusem, az tu nagle dostac najpierw w twarz od jednego, a potem od drugiego.</p>
  30. </div></div>
  31.  
  32.  
  33. <div class="boksw">
  34. <div class="lewa"><p class="zlewa">4.</p></div>
  35. <div class="prawa">
  36. <p class="zprawa">Na komisariacie zeznaja trzej swiadkowie bojki. Pierwszy zeznaje murzyn :
  37.  - Ja nic nie wiedziec. Ja jechac sobie spokojnie autobusem, az tu nagle dostac najpierw w twarz od jednego, a potem od drugiego.</p>
  38. </div></div>
  39.  
  40.  
  41. <div class="boksw">
  42. <div class="lewa"><p class="zlewa">5.</p></div>
  43. <div class="prawa">
  44. <p class="zprawa">Na komisariacie zeznaja trzej swiadkowie bojki. Pierwszy zeznaje murzyn :
  45.  - Ja nic nie wiedziec. Ja jechac sobie spokojnie autobusem, az tu nagle dostac najpierw w twarz od jednego, a potem od drugiego.</p>
  46. </div></div>
  47.  
  48. </div>
  49.  
  50. </body>
  51. </html>
[PHP] pobierz, plaintext


Problem jest taki, że Opera a nawet stary IE6 wyswietla wszystko poprawnie czyli tak:
http://scr.hu/screenshooter/0487525/kijoppx


Natomiast Chrome i Firefox tak:
http://scr.hu/screenshooter/0487525/pbwtwwl


Naprawdę nie wiem w czym problem... Domyslam się, że to pewnie ten procentowy "width" wszystko psuje, ewentualnie brak "height" dla "boksw"?
lobopol
30.03.2012, 17:52:43
Na oko kwestia floatów daj w .boks overflow: hidden
prowseed
30.03.2012, 19:35:33
Skoro float'y psuja (tez na oko patrze wink.gif ) to raczej <br style="clear:both;line-height:0;" /> po kazdym z boksow
lobopol
30.03.2012, 20:23:57
Niezbyt to ładne rozwiązanie, w tym wypadku sam overflow by wystarczył
Teppic
30.03.2012, 20:42:26
Dziękuję, wystarczył sam overflow...

Ale wiecie dziwi mnie dlaczego Chrome i Firefox nie potrafią tego dobrze wyswietlic a staruszek IE6 tak;P.

Chyba od teraz wszystkim moim nadrzędnym divom dawał to "overflow". Człowiek się cały czas uczy;).
lobopol
30.03.2012, 20:44:32
tylko overflow nie jest dobry przy każdej sytuacji, a kwestia, że w ie działa oznacza tylko to, że źle tam zostało zaimplementowane
Teppic
30.03.2012, 21:13:39
No ja rozumiem, że overflow nie wszędzie da się zastosować. Będę to stosował tylko w takich jak mój dzisiejszy przypadek. A tak poza tym to ja nie mam zaufania do tych całych "float". Nie wiem dlaczego ale wolałbym serio tabel uzyć i zmiennych rozmiarów komórek do tego;P. No ale trza iśc z duchem czasu;P
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.