Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [html]Problem z IE
Forum PHP.pl > Forum > Przedszkole
Kirke
Hmm... Chyba większość początkujących ma ten problem... Napisanie strony pod ff czy operę nie sprawia mi większych trudności, ale kiedy przyszło do IE... Okazało się, ze moja strona na zajęcia informatyki wygląda na ie po prostu okropnie ;/ Cały layout przesuwa się na lewo i wogóle ignoruje mój css.. Nie mam pojęcia jak to rozwiązać więc proszę o pomoc...

Stronę można obejrzeć tutaj

Będę bardzo wdzięczna za jakiekolwiek wskazówki co z tym zrobić sad.gif
Ar2r
Próbowałaś wycentrować głównego diva (align)? Nie mogę tego znaleźć.
Kirke
To są jedyne atrybuty dla głównego div'a.

  1. div#main {
  2. width: 780px;
  3. height: 100%;
  4. margin: 0;
  5. margin: auto;
  6. }
Ar2r
Wobec tego spróbuj
  1. <div id="main" align="center">
mike
Cytat(Ar2r @ 13.11.2007, 22:12:55 ) *
Wobec tego spróbuj
  1. <div id="main" align="center">
Nie ma takiego atrybutu dla elementów <div /> jak align.

Rozwiązanie:
Kod
body {
    background-image: url('images/tlo-fiolet.png');
    background-repeat: repeat-x;
    margin: 0px;
    font-family: sans-serif;
    font-size: 11px;
    color: #595959;
    /* dodaj: */
    text-align: center;
}

div#main {
    width: 780px;
    height: 100%;
    margin-top: 0px;
    margin: auto;
    /* dodaj: */
    text-align: left;
}
Taki mały trik na badzIEwIE
drPayton
1. Taki zapis jest bez sensu:
  1. div#main {
  2. width: 780px;
  3. height: 100%;
  4. margin: 0;
  5. margin: auto;
  6. }

Najpierw dajesz margines na 0, potem na auto. Centruje się dając 0 dla top/bottom i auto dla left/right, czyli:
  1. margin:0 auto;

Ale to i tak nie zadziała dla IE. Centrowanie u Ciebie pod IE działa (sprawdzałem pod IE7) natomiast co do rozjeżdżania się kolumn, tu trzeba odpowiednio zadziałać floatami i marginesami. IE jest znany z dość, hmmm, nietypowego określania marginesów.
Kirke
Ok. dziękuję smile.gif Udało się wycentrować smile.gif
Zostało mi jeszcze rozjeżdżające się menu i menu, które wogóle odjeżdża w galerii...
A poza tym nie jestem pewna czy lightwindow działa.. ;/
mike
Cytat(Kirke @ 13.11.2007, 22:36:23 ) *
Zostało mi jeszcze rozjeżdżające się menu i menu, które wogóle odjeżdża w galerii...
Uzyj dla ul#menu_inner tych samych reguł opisujących marginesy i paddingi, których użyłaś w ul#menu.
drPayton
To nic nie da. Problemem jest zbyt duży (dla IE) padding-left dla ul#menu

added:
I sama szerokość tegoż ul#menu też
Dla IE po prostu te elementy nie mieszczą się obok siebie przy narzuconej szerokości 780px dla div#main
Kirke
Występuje także taki problem...
Zupełnie nie wiem jak to powinno wyglądać żeby ie to odpowidznio interpretowało.. Męczę się z tym wszystkim już od 7 godzin.. ;(
mike
Jest taki bardzo popularnu bug w IE, który polega na dublowaniu wartości marginesów dla elemenów, którym nadano foat.
I cibie ul#menu ma własnie float: right;
Są dwa rozwiązania:
1. Zastosować Conditional comments i stworzyc oddzielny arkusz styli dla IE, w którym wartości margnesów bedą dwa razy mniejsze. Jak pomnoży to wyjdzie tyle samo co w FF/Opera
2. Dorzuć do ul#menu wpis display: inline;

Sposób 2 nie zawsze jest dobry bo czasem dorzucenie tego nam coś rozwali. W tym przypadku powinno być OK.
Generalnie ja polecam 1.
Kirke
Hmmm.. Nie jestem w stanie stwierdzić czy nareszcie wszystko wygląda tak jak powinno, ponieważ nie ładują się żadne obrazki (przynajmniej u mnie ;/)...
-kuba-
wrzuc cale menu pomiedzy <div id="menuHolder"> </div> i podmien kilka klas w CSS na:

  1. div#menuHolder {
  2. float: right;
  3. width: 158px;
  4. background-image: url('images/menu2.png');
  5. background-repeat: no-repeat;
  6. }
  7.  
  8. ul#menu {
  9. margin: 50px 0 0 20px;
  10. padding: 0;
  11. }
  12.  
  13. ul#menu li {
  14. list-style: none;
  15. margin: 0px;
  16. padding: 2px 0 2px 0;
  17. }
  18.  
  19. ul#menu_inner {
  20. margin: 0;
  21. padding: 0 0 0 23px;
  22. list-style: circle;
  23. }
Gość
poprawione dwie klasy

  1. ul#menu li {
  2. margin: 0px;
  3. padding: 2px 0 2px 0;
  4. }
  5.  
  6. ul#menu_inner {
  7. margin: 0;
  8. padding: 0 0 0 23px;
  9. list-style: circle;
  10. }
-kuba-
sorry to te jednak:

  1. ul#menu {
  2. margin: 50px 0 0 20px;
  3. padding: 0;
  4. list-style: none;
  5. }
  6.  
  7. ul#menu li {
  8. margin: 0px;
  9. padding: 2px 0 2px 0;
  10. }
Kirke
Ostatnie odpowiedzi bardzo mi pomogły, dziękuję ;*
Chyba ostatnie pytanie: jak sprawić aby inne obrazki wyświetlały się na środku? Miałąm z tym problem nawet pod inne przeglądarki.. ;/
-kuba-
tak nei bardzo rozumiem gdzie na srodku
Kirke
Na środku diva tresc.

I wyszło jeszcze jedno pytanie: czy tabelka w galerii jest za szeroka i jak to zmienić? (Nie jestem w stanie tego sprawdzić, ponieważ używam linuxa winksmiley.jpg)
-kuba-
zeby zawartosc diva byla na srodku daj:
text-align: center;

a w tabeli zmien <table cellpadding="0" cellspacing="0" width=""> i daj width na szerokosc jaka trzeba ale jesli jakias fota bedzie wieksza niz powinna i tak rozepchnie tabele w prawo wiec ustaw moze stala szerokosc dla kazdej komorki <td> i dodaj overflow: hidden;
-kuba-
a text pod zdjeciem obejmij w jakies tagi np <span></span> i ustaw jakis rozmiar dla tego tekstu bo w IE bedzie wiekszy niz na inncyh przegladarkach
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.