Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JS] Wysokość komórki w IE i pozycja obrazka
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
anadius
Najpierw zobacz
Problem pojawił się w IE (na Mozilli, Google Chrome i Operze działa dobrze)... A mianowicie chcę pobrać wysokość komórki z tekstem, aby odpowiednio ustawić ten listek po prawej (dokładnie na środku ma być). Użyłem dwóch różnych rozwiązań, jednak oba zawiodły:
[JAVASCRIPT] pobierz, plaintext
  1. document.getElementById('text').clientHeight;
[JAVASCRIPT] pobierz, plaintext
i
[JAVASCRIPT] pobierz, plaintext
  1. document.getElementById('text').offsetHeight;
[JAVASCRIPT] pobierz, plaintext
('text' to ID komórki z tekstem)
W IE wyświetla 0, w innych przeglądarkach 1052... Czy jest jakiś sposób, żeby działało też w IE?

I kolejny problem w IE, tym razem z pozycją liścia po lewej na dole. Ma atrybuty:
  1. position: absolute;
  2. left: -150px;
  3. bottom: 0px;
Dół obrazka liścia powinien być równo z dołem tabelki, która jest wsadzona w diva z:
  1. position: relative;
Z tym też nie potrafię się uporać.
zegarek84
po pierwsze po co JS skoro można w samym CSS??
po drugie:
Cytat
In IE 6 contentPane.offsetHeight is not available while the document
is loading. I confirmed this by placing
alert(contentPane.offsetHeight) in a function called report() that is
triggered by the onLoad event.


w samym css to zamień linijki:
Kod
img#leaf { position: absolute; left: -150px; width: 241px; height: 301px; }
img#leaf2 { position: absolute; left: -150px; width: 241px; height: 284px; }
img#leaf3 { position: absolute; right: -170px; width: 329px; height: 267px; }

(skoro znasz wysokość obrazków to nie problem - jakbyś nie znał też jest jeden trick winksmiley.jpg ) na linijki:
  1. #leaf, #leaf2, #leaf3 {
  2. position: absolute;
  3. display: block;
  4. margin:0px;
  5. padding:0px;}
  6. #leaf, #leaf2 {
  7. left: -150px;
  8. width: 241px;}
  9. #leaf {
  10. height: 301px;
  11. bottom: 0px;}
  12. #leaf2 {
  13. height: 284px;
  14. top: -130px;}
  15. #leaf3 {
  16. right: -170px;
  17. width: 329px;
  18. height: 267px;
  19. top:50%;
  20. margin-top: -133px;}

co do ostatniego problemu to raczej musisz ustawić padding div'a na 0px (nie chce mi się włączać windowsa ;p )...

pozycje liści są na swoim miejscu bez JS winksmiley.jpg
a i ostatnie o.0:
Kod
txt_height/2-267/2

od kiedy to przypisujemy wartości po pół i skoro to masz w pikselach dlaczego nie jest zakończone +'px'; questionmark.gif [ale to nie potrzebne winksmiley.jpg]

ps. tak jeszcze dodam jakbyś nie zauważył - tutaj na środku ustawia:
Kod
   top:50%;
    margin-top: -133px;
anadius
Po pierwsze: jeśli tekst będzie za krótki, to nie chcę mieć liścia w jego połowie (po prawej), ani nakładających się na siebie (po lewej - jeszcze się napisze kod :P).
Po drugie: dzięki! Działa. ;]
Dzięki za przypomnienie o oszczędności znaków w pliku. :P
Padding div'a nic nie daje. :/
Kod
Math.round((text_height-267)/2) + 'px'
Lepiej tak? xD
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.