Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS] Dziwny problem - rozmiary elementow liniowych
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
impuls2003
Problem jest taki:
Mam sobie na gorze ciag elementow liniowych. i teraz trzeba sumie koszyka 0.00 nadac odpowiednia wysokosc i szerokosc (zeby wyposrodkowac i zeby przykrylo rowno tlo). Z tego co wiadomo IE nie obsluguje szerokosci i wysokosci dla elementow liniowych ani tez inline-block.

Przed
  1. .poziom1_koszyk {
  2. display: inline;
  3. width: 68px;
  4. height: 23px;
  5. text-align: center;
  6. vertical-align: middle;
  7. overflow: hidden;
  8. clear: right;
  9. margin: 0;
  10. padding: 0;
  11. }


Po
  1. .poziom1_koszyk {
  2. display: inline-block;
  3. width: 68px;
  4. height: 23px;
  5. text-align: center;
  6. vertical-align: middle;
  7. overflow: hidden;
  8. clear: right;
  9. margin: 0;
  10. padding: 0;
  11. }
  12.  
  13. .poziom1_koszyk {
  14. display: inline;
  15. width: 68px;
  16. height: 23px;
  17. text-align: center;
  18. vertical-align: middle;
  19. overflow: hidden;
  20. clear: right;
  21. margin: 0;
  22. padding: 0;
  23. }


Ten drugi kod generuje dziwne rezultaty. I nie ma prawa dzialac a jednak cos sie zmienia.

-----------------------------------
Jak nalepiej ustawic rozmiary elementu liniowego.
Bo w tym drugim przypadku generuje on nie takie rozmiary jak chce.
Pozdrawiam.
-----------------------------------------
Kod jest ustawiony tak:
  1. .poziom1 {
  2. border: 0;
  3. text-align: right;
  4. background: url(images/jastrzab3_03b.gif);
  5. width: 780px;
  6. height: 23px;
  7. margin: 0;
  8. padding: 0;
  9. FONT-WEIGHT: normal;
  10. FONT-SIZE: 12px;
  11. COLOR: #000000;
  12. FONT-FAMILY: Verdana;
  13. TEXT-DECORATION: none;
  14. }
  15.  
  16. .poziom1_koszyk {
  17. display: inline;
  18. width: 68px;
  19. height: 23px;
  20. text-align: center;
  21. vertical-align: middle;
  22. overflow: hidden;
  23. clear: right;
  24. margin: 0;
  25. padding: 0;
  26. }


  1. <div class="poziom1">
  2. <a href="#" onmouseover="ukryj('j2_04');" onmouseout="pokaz('j2_04');"><div style="display: inline;" id="j2_04"><img src="images/jastrzab2_04.gif"></div></a>
  3. <a href="#" onmouseover="ukryj('j2_05');" onmouseout="pokaz('j2_05');"><div style="display: inline;" id="j2_05"><img src="images/jastrzab2_05.gif"></div></a>
  4. <img src="images/jastrzab2_06.gif">
  5. <div class="poziom1_koszyk">$sBasketSummaryAmount</div>
  6. <img src="images/jastrzab2_08.gif">
  7. <img src="images/jastrzab2_09.gif">
  8. <a href="index.php?p=ordersBasket" onmouseover="ukryj('j2_10');" onmouseout="pokaz('j2_10');"><div style="display: inline;" id="j2_10"><img src="images/jastrzab2_10.gif"></div></a>
  9. </div>
revyag
Jeśli jakiemuś nieliniowemu elementowi nadasz style display:inline, to straci on wszystkie swoje właściwości i będzie się zachowywał jak tekst. Czyli nie nadasz mu ani wysokości, szerokości. Ani innych właściwości które nie wiem po co w tym kodzie masz
Kod
overflow: hidden;
clear: right;


Cytat
Z tego co wiadomo IE nie obsluguje szerokosci i wysokosci dla elementow liniowych

poprawka, żadna przeglądarka nie obsuguje, bo tak ma być, to jest prawidłowe zachowanie.
impuls2003
Poki co experymentuje z ustawiniami.

Jak dalem zoom: 1
to element zostal liniowy, ale moge mu nadac szerokosc i wysokosc. Tylko co z tego jak tylko w IE pokazuje poprawnie sad.gif

Teraz patrzac na kod na samej gorze:
poziom1_koszyk {display: inline-block}
poziom1_koszyk {display: inline}
IE powinien brac wartosc z ostatniej linijki, a jednak tez ustawia szerokosc i wysokosc (tez tylko na IE chodzi)
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.