Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [CSS]Niewłaściwe wyświetlanie ramki przez Chrome i Firefox
Teppic
post
Post #1





Grupa: Zarejestrowani
Postów: 44
Pomógł: 0
Dołączył: 12.09.2008

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

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"?

Ten post edytował Teppic 30.03.2012, 17:16:19
Go to the top of the page
+Quote Post
lobopol
post
Post #2





Grupa: Zarejestrowani
Postów: 1 729
Pomógł: 346
Dołączył: 4.04.2009

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

Na oko kwestia floatów daj w .boks overflow: hidden
Go to the top of the page
+Quote Post
prowseed
post
Post #3





Grupa: Zarejestrowani
Postów: 433
Pomógł: 64
Dołączył: 29.01.2011
Skąd: Warszawa

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

Skoro float'y psuja (tez na oko patrze (IMG:style_emoticons/default/wink.gif) ) to raczej <br style="clear:both;line-height:0;" /> po kazdym z boksow
Go to the top of the page
+Quote Post
lobopol
post
Post #4





Grupa: Zarejestrowani
Postów: 1 729
Pomógł: 346
Dołączył: 4.04.2009

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

Niezbyt to ładne rozwiązanie, w tym wypadku sam overflow by wystarczył
Go to the top of the page
+Quote Post
Teppic
post
Post #5





Grupa: Zarejestrowani
Postów: 44
Pomógł: 0
Dołączył: 12.09.2008

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

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;).
Go to the top of the page
+Quote Post
lobopol
post
Post #6





Grupa: Zarejestrowani
Postów: 1 729
Pomógł: 346
Dołączył: 4.04.2009

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

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
Go to the top of the page
+Quote Post
Teppic
post
Post #7





Grupa: Zarejestrowani
Postów: 44
Pomógł: 0
Dołączył: 12.09.2008

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

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
Go to the top of the page
+Quote Post
« 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: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

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

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