DIV -> IE -> Czyli nic nowego - prośba o pomoc, jak sprawić aby "wszędzie" wyglądało identycznie... Opcje

[MEAT]

http://web4brand.eu/temp/ to strona którą obecnie testuję. Zaczynam zabawę z DIV'ami i mam pewien problem z wyświetlaniem mojej strony w IE. Z racji tego że sam nie mam IE to testuję wszystko przez browsershota. Oto wyniki zrzutów ekranu:

Firefox 3.0


Opera 9.5(na Ubuntu)


Safari 3.0


IE 7.0


Czy ktoś może mi pomóć w rozwiązaniu tego problemu, by wszędzię w tych 4 przeglądarkach było niemalże identycznie? Strona bezbłędnie przechodzi walidację HTML i CSS...

[grzesiek_g]

[HTML] pobierz, plaintext 
div#container {
    margin:0 auto; /* to usuń */
    width:100%;
    background-image:#fff url(images/top_bg.gif) repeat-x top;
}
div#content {    
    background-image: url(images/top_bg.gif);/* to usuń */
    background-repeat: repeat-x;/* to usuń */
    background-position: top;/* to usuń */
    text-align: center;/* to usuń */
    width:847px;
    margin:0 auto;
}
div#header {
    margin-left: auto;/* to usuń */
    margin-right: auto;/* to usuń */ 
    width: 874px;/* to usuń */
    width:100%;
    height: 274px;
}
div#wih {
    position: relative;
    background-image: url(images/world_in_hand.png);
    background-repeat: no-repeat;
    background-position: center center;
    margin-left: 274px;/* to usuń */
    width: 600px;/*tutaj masz 2 wyjścia, albo tutaj szerokość zmniejszyć o 4px albo w logo zmniejszyć, tak aby obie dały w sumie 874px*/
    float:right;
}
[HTML] pobierz, plaintext 

Tutaj masz zmiany, to co z komentarzem to usuń u siebie, bez komentarza dodaj, pozostałe pozostaw bez zmian. Nie testowałem. Zastosuj się do tego i na 90% będzie poprawnie we wszystkich przeglądarkach. Na twoim miejscu pod logo podlinkowałbym stronę główną, to nic że może to byc obok w menu, już tak się ludzie przyzwyczaili, że logo prowadzi na główną.

[MEAT]

Dziękuję... miałeś małe błędy w kodzie ale koncepcja idealna! Dzięki Wielkie... W sumie jakbyś mógł na chłopski rozum w czym tkwił problem na pewno przybliży mi to pojęcie o DIV i CSS

[grzesiek_g]

Ogólnie to chciałeś ustawić to obok siebie, ale źle policzyłeś wymiary elementów, wymiary wewnętrznych elementów powinny być równe/mniejsze od wymiaru zewnętrznego elementu. Aby trochę to zagmatwać na wymiar składa się width, padding, margin. Poczytaj o box model.

Poza tym chciałeś za pomocą margin:0 auto; centrować element który miał szerokość równą 100%, tak się nie da. Do tego szerokość musi być mniejsza od rozmiarów okna, nie możesz wycentrować czegoś co jest i tak rozciągnięte na całej długości.

Jak masz kontener który ma powiedzmy 300px i wewnątrz niego też coś co ma 300px to pisz nie width:300px tylko: width:100%. Ułatwi to późniejszą edycję, zmienisz wartość w jedny miejscu.

Co do błędów to nie wiem jakie były, ale pisane to było z palca, więc mogłem się pomylić (możliwe, że w wymiarach).