Witajcie,

Od pewnego czasu borykam się z problemem pod IE. Mianowicie - jestem w fazie tworzenia theme pod Wordpressa i mam mały kłopot. Centralna część strony składa się z dwóch bloków - tego, w którym jest główny tekst, wiadomości (div "lewa") oraz drugi, gdzie jest menu itd. (div "prawa"). Całość jest zamknięta w dużego diva (div "pelny"). O ile w Firefoxie wszystko jest na środku (a musi być, bo jest powiązane z headerem i przyszłą stopką), tak w IE wszystko zlewa się na lewą stronę. Na początku był nawet taki kłopot, że w IE jeden div zleciał pod drugiego, ale zrobiłem osobny arkusz CSS i udało się zrobić divy lewy oraz prawy w jednej linii (display: inline).

Tak to wygląda pod IE: http://img21.imageshack.us/img21/5725/44834235.jpg

Styl 3 divów dla IE:

[HTML] pobierz, plaintext 
.pelny{
                width: 951px;
display: inline;  
        }
 
       .lewa{
float:left;
        width: 649px;
                background-image: url(img/pasekleft.jpg);
display: inline;
}                
 
                .prawa{
        width: 302px;
                background-image: url(img/pasekright.jpg);
float: left;
                display: inline;
 
        }
[HTML] pobierz, plaintext 

Dla diva "pelny" kombinowałem, dawałem mu różne marginy i tym podobne sprawy, ale zachowuje się jakby całkiem je lekceważył. Nie wiem co jest - proszę o szybką pomoc, bo praktycznie tylko ta rzecz blokuje mi kontynuowanie prac (a deadline robi swoje). Nawet w Operze i Chrome wszystko jest OK.

Było setki jeżeli nei tysiące razy.
Dla elementu nadrzędnego diva dajesz

Tylko musisz pamietac zeby dla tego diva dac spowrotem

czy jak tam wolisz. i Wystarczyło uzyc szukajki i nie zmarnowalbys troche minut na napisanie tego tematu.
Poza tym ten inline to raczej mało potrzebny.

Mówiąc element nadrzędny masz na myśli .body? Dałem text-align dla body - nie zadziałało. Dałem dla diva .pelny - także nie działa. Zresztą tą metodę praktykowałem już wcześniej i także nie dawało rezultaty. Co do wyszukiwarki zaś - po wpisaniu DIV i IE otrzymamy komunikat, że za krótkie wyrażenie. Wiem, złośliwy jestem, ale i tak przejrzałem 2 ostatnie strony i nie znalazłem odpowiedzi na nurtujące mnie pytanie. To samo w Google.

Pokaż strony. A jeszcze lepszy będzie link.
A wiesz co dla google oznacza DIV IE? Zapomniałeś ładnie sformułować zapytania "centered div in ie" lepiej?

Poza tym masz w dokumencie element z parametrem class="body"?
bo .body != body

spróbuj do body {margin:0 auto; text-align:center}
oraz wywalic tego inline z .pelny i dac tak:
.pelny{
width: 951px;
margin:0 auto;
}

http://www.fireworks.com.pl/wp/

Link do strony. Na kodowanie nie patrzeć, bo to istna makabra - przy przenoszeniu wszystko się naprawi, sprawdzałem to już.

body{ margin: auto; padding: 0; }
#wraper{ width: 780px; margin: auto; padding: auto; }

jeśli wraper to u Ciebie główny kontener, dodatkowo nadaj mu jakąś szerokość

Oho - w końcu postęp! Coś się ruszyło, jest to mniej więcej wyśrodkowane na chwile obecną (zobacz na IE http://www.fireworks.com.pl/wp/) - tylko kilkanaście pixeli w kierunku prawej krawędzi trzeba byłoby to podsunąć i za bardzo nie mam pomysłu jak... doradzisz coś?

IE ma buga podwójnych marginesów. http://kurs.browsehappy.pl - dział bugi IE, znajdziesz.

Oj, chyba w najnowszej wersji IE porada związana z *display:inline* nie działa. Zastosowałem to i niestety nie rozwiązało to mojego problemu. Zerknąłem do Google - dosłownie wszędzie jest mowa o stosowaniu tamtego display:inline, ale jak już wspomniałem - nie daje to rezultatu. Zapewne w starych IE tak, ale w nowym niestety nie - a przecież dostosowuje się pod najnowszą wersję każdego browsera.

Nie mówię tylko o inline. Robisz hacka na stare IE, podajesz nową wartość marginesu.

A w Twoim konkretnym przypadku chodzi o różnice w obliczaniu wymiarów w IE.

Ja to chyba dzisiaj coś powoli myślę, hehe. Nie jestem za bardzo wstanie tego zrobić, ponieważ w 4 klasach w CSS nie mam użytego margin podanego w pixelach / procentach. Mam ustawione przy jednym, dużym bloku na całość :

[HTML] pobierz, plaintext 
.center{
width: 951px; 
margin: auto; 
padding: auto;}
[HTML] pobierz, plaintext 

No więc akurat tutaj to chyba na pół niczego nie podzielę

Poczytaj o bugach box-model w IE. Będziesz musiał zmienić wymiary specjalnie dla IE.

Rusz trochę palce.

spróbuj w ten sposób:



koniecznie w takiej kolejności, to sprawi, że pod FF będzie 400px a pod IE 100px

Tutaj akurat wydaje mi się, że nie jest to do końca dobre rozwiązanie. Powody są proste - jeden to to, że dla Internet Explorera mam stworzony oddzielny styl, nie ingerujący w Firefoxa i resztę browserów, a dwa - przy ustawieniu takich wartości, na większych rozdzielczościach chyba nie działałoby to w miarę dobrze. Tutaj przecież są podane konkretnie wymiary - i na pewno centralnie elementu na każdej rozdzielczości nie ułożą. Może jestem w błędzie - jeśli tak, to niech ktoś mnie poprawi.

nic takiego nie musisz robić, przecież w elemencie .pelny masz określoną na stałe szerokość, a jak rozumiem cala reszta jest wewnątrz tego elementu, więc jeśli dasz margines to będzie on względem tego .pelny i stałe dla każdej rozdzielczości bo zawsze masz szerokość 951px

Przez czas wczorajszej dyskusji było trochę zmian w kodzie i nie wygląda to do końca tak, jak początkowo opisywałem.

Na chwilę obecną kod dla Internet Explorer prezentuje się tak:

[HTML] pobierz, plaintext 
.pelny{
                display:inline;
        }
 
              .lewa{
float:left;
        width: 649px;
                background-image: url(img/pasekleft.jpg);
      display: inline;
 
}                               
 
                .prawa{
        width: 302px;
                background-image: url(img/pasekright.jpg);
float: left;
                display: inline;
 
        }       
 
 
.center{
width: 951px; margin: auto; padding: auto;}
[HTML] pobierz, plaintext 

Zaś dla Firefoxa:

[HTML] pobierz, plaintext 
.prawa{
        width: 302px;
                background-image: url(img/pasekright.jpg);
                float: left;
                         overflow: inherit;                 
        }
 
 
  .lewa{
        width: 649px;
                background-image: url(img/pasekleft.jpg);
                vertical-align:top;
                        float: left;
                        overflow: inherit; 
 
}
 
.pelny{
                width: 951px;
                margin: 0 auto;
                vertical-align:top;
                top: 0px;
                display: block;
 
                overflow: inherit; 
 
 
        }
[HTML] pobierz, plaintext 

Dla IE został stworzony div *center*, który obejmuje całą stronę. W przypadku Firefoxa trzy divy są wyłącznie dla treści, a element *center* jest po prostu ignorowany, bo nie ma go w podstawowym CSS.
Tak wygląda to pod IE: http://img21.imageshack.us/img21/2189/podie.jpg - jak widać, jest przesunięte o około 10 px.

to daj dla .lewa dla stylów IE margin-left: 10px;

Dla lewego dodałem (konkretnie - 24px jak się okazało), ale musiałem jeszcze dodać tą wartość dla szerokości całej kolumny.

Dzięki wielkie wszystkim za pomoc, szczególnie dla Ciebie, Bliitz Problem rozwiązany, mogę brać się do reszty prac.

Niestety, pojawił się kolejny problem - tak więc nie będę tworzył kolejnego tematu, bo również tyczy się on DIVów.

Mianowicie - nie mogę sobie poradzić z tym, aby prawa część strony, czyli menu (div "prawa") automatycznie dostosowywał swoją długość do diva obok (div "lewa"). Próbowałem z height: auto, ale to w divach nie funkcjonuje, a różne overflow'y też niestety nie pomogły. Ludzie radzą, aby zastosować min-height, no ale tutaj nie mam jak - przecież to ma funkcjonować jako blog i nie będę miał wpływu na długość elementu z treścią.

Sami zobaczcie jak to wygląda: <a href="http://www.fireworks.com.pl/wp/" target="_blank">http://www.fireworks.com.pl/wp/</a>

Ma ktoś pomysł na to, co z tym zrobić?

Przecież to nie tabelki ...

Najprościej będzie opakować całość w DIVa i nadać mu background taki jak background prawej kolumny i to najczęściej spotykane rozwiązanie, są też ujemne marginy i paddingi, masa kombinowania, ogólnie technik wiele, polecam z tłem

http://www.positioniseverything.net/articl...out/equalheight
http://www.ejeliot.com/blog/61

Poczytaj