Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML]Błędne wyświetlanie grafiki w IE
Forum PHP.pl > Forum > Przedszkole
mefistofeles
7.05.2010, 06:07:39
Mam taki kodzik:

[HTML] pobierz, plaintext 
  1. <strong>Ocena:</strong> <span class="pokaz-w-linii">
  2. <ul class="ocenianie-gwiazdki male-gwiazdki">
  3. <li class="aktualna-ocena" style="width:'.$widthoce.'%;" title="Aktualna ocena to '.$ocena[$i].'">Aktualna ocena to '.$ocena[$i].'</li>
  4. </ul>
  5. </span>
[HTML] pobierz, plaintext



Oraz taki css do niego:

[CSS] pobierz, plaintext 
  1. .pokaz-w-linii{ display:-moz-inline-block; display:-moz-inline-box; display:inline-block; vertical-align: middle; }
  2. .ocenianie-gwiazdki { position:relative; width:125px; height:25px; overflow:hidden; list-style:none; margin:0; padding:0; background-position: left top; }
  3. .ocenianie-gwiazdki li { display: inline; }
  4. .ocenianie-gwiazdki a, .ocenianie-gwiazdki .aktualna-ocena{ position:absolute; top:0; left:0; text-indent:-1000em; height:25px; line-height:25px; outline:none; overflow:hidden; border: none; }
  5. .ocenianie-gwiazdki a:hover, .ocenianie-gwiazdki a:active, .ocenianie-gwiazdki a:focus{ background-position: left bottom;}
  6. .ocenianie-gwiazdki .aktualna-ocena{ z-index:1; background-position: left center; }
  7. .ocenianie-gwiazdki a.gwiazdka-j { width:20%; z-index:6; }
  8. .ocenianie-gwiazdki a.gwiazdka-d { width:40%; z-index:5; }
  9. .ocenianie-gwiazdki a.gwiazdka-t { width:60%; z-index:4; }
  10. .ocenianie-gwiazdki a.gwiazdka-c { width:80%; z-index:3; }
  11. .ocenianie-gwiazdki a.gwiazdka-p { width:100%; z-index:2; }
  12. .male-gwiazdki { width:70px; height:14px; }
  13. .male-gwiazdki, .male-gwiazdki a:hover, .male-gwiazdki a:active, .male-gwiazdki a:focus, .male-gwiazdki
  14. .aktualna-ocena { background-image: url(images/gwiazdki_kategory.gif); line-height: 14px; height: 14px; }
[CSS] pobierz, plaintext



Problem polega na tym, że koło napisu "Ocena:" w tej samej linii mają pojawić się gwiazdki.
W FF i Operze wszystko jest ok, w nieszczęsnym IE gwiazdki spadają do nowej linii i mimo różnych kombinacji nie mogę uzyskać w IE
zadowalającego efektu.

Z góry dziękuję za pomoc.
darophp
7.05.2010, 06:16:31
Ja już nie mogę: 

[PHP] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
  3. <head>
[PHP] pobierz, plaintext


Dodawajcie DOCTYPE Strict na początku sciana.gif
mefistofeles
7.05.2010, 06:28:40
Mam doctype strict:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Proszę o jakieś sensowne rady.

pedro84
7.05.2010, 09:51:21
Po co Ci ten <span> (w którym jest lista). No i może nadaj liście display:inline ?
essey
7.05.2010, 10:19:08
Aleś naładował tam tych styli...

Aby TO zadziałało, wsadź strongi w diva z parametrem float:left. (możesz przenieść go do class oczywiście winksmiley.jpg.
Kod
<div style="float:left"><strong>Ocena:</strong></div>


Oraz dodaj taki sam parametr dla listy. Dzięki temu ustawi się cała lista na prawo od napisu strong.
Kod
.ocenianie-gwiazdki { float: left }


I usuń ten span winksmiley.jpg
mefistofeles
7.05.2010, 12:12:43
Zmodyfikowałem ten kod tak jak mówiłeś.

Teraz mam:

[HTML] pobierz, plaintext 
  1. <div style="float:left"><strong>Ocena:</strong></div> 
  2. <ul class="ocenianie-gwiazdki male-gwiazdki">
  3. </ul>
[HTML] pobierz, plaintext


i css:

[CSS] pobierz, plaintext 
  1. .ocenianie-gwiazdki {float: left; position:relative; width:125px; height:25px; overflow:hidden; list-style:none; margin:0; padding:0; background-position: left top; }
  2. .ocenianie-gwiazdki li {float: left; display: inline; }
  3. .ocenianie-gwiazdki a, .ocenianie-gwiazdki .aktualna-ocena{ position:absolute; top:0; left:0; text-indent:-1000em; height:25px; line-height:25px; outline:none; overflow:hidden; border: none; }
  4. .ocenianie-gwiazdki a:hover, .ocenianie-gwiazdki a:active, .ocenianie-gwiazdki a:focus{ background-position: left bottom;}
  5. .ocenianie-gwiazdki .aktualna-ocena{ z-index:1; background-position: left center; }
  6. .ocenianie-gwiazdki a.gwiazdka-j { width:20%; z-index:6; }
  7. .ocenianie-gwiazdki a.gwiazdka-d { width:40%; z-index:5; }
  8. .ocenianie-gwiazdki a.gwiazdka-t { width:60%; z-index:4; }
  9. .ocenianie-gwiazdki a.gwiazdka-c { width:80%; z-index:3; }
  10. .ocenianie-gwiazdki a.gwiazdka-p { width:100%; z-index:2; }
  11. .male-gwiazdki { width:70px; height:14px; }
  12. .male-gwiazdki, .male-gwiazdki a:hover, .male-gwiazdki a:active, .male-gwiazdki a:focus, .male-gwiazdki
[CSS] pobierz, plaintext


I ciągle gwiazdki zjeżdżają na dół ...
programista20
7.05.2010, 18:19:30
A jak wygląda gwiazdka do wyświetlenia... Jaki kod tworzy zmienna $ocena[$i] questionmark.gif

Moim zdaniem problem tkwi tutaj pewnie wyświetlasz zamiast img coś innego np. div i powoduje to przeskoczenie grafiki do nowej linii
mefistofeles
8.05.2010, 12:25:11
Pominelem ta czesc kodu dla ulatwienia i nie ma juz tej zmiennej teraz jest:


[HTML] pobierz, plaintext 
  1.  <div style="float:left"><strong>Ocena:</strong></div>
  2.  
  3.       <ul class="ocenianie-gwiazdki male-gwiazdki">
  4.  
  5.       </ul>
[HTML] pobierz, plaintext


i mimo wszystko dalej przeskakuje na dół, ale jedynie w IE w pozostałych przeglądarkach jest tak jak trzeba.
Ociu
8.05.2010, 12:40:35
@mefistofeles do kodu css posiadamy odpowiednie bbCode - [ css] Proszę zacząc go stosować, aby kod był czytelniejszy.

Pozdrawiam.
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.