Witam. Stawiam pierwsze kroki w tworzeniu stron przy pomocy CSS. Mam zrobiony szablon strony w psd, pociety i zakodowany. Wszystko pieknie działa wszedzie tylko nie na IE. W innych przeglądarkach strona jest wyśrodkowana a elementy do siebie przylegają. W IE kolumna lewa od prawej sa rozjechane po obu bokach przeglądarki a nagłówek przylega do lewego boku a nie jest na środku. Nie wiem za bardzo co zrobić, co zmienić w CSS, zebys trona była wyśrodkowana a elementy do siebie przylegały, proszę o pomoc bo już tak kombinuję od jakiegoś czasu i nic. Mój kod CSS:


body {
margin : auto;
padding : 0px;
width : 913px;
background-color: #fcf7f1;
scrollbar-base-color: 650c10;
scrollbar-track-color: #e3d6c3;
scrollbar-highlight-color: #e3d6c3;
scrollbar-arrow-color: #e3d6c3;

}



#nagłówek {
width : 913px;
height: 280px;

}

#kolumnaLewa {

width : 252px;
height: 452px;
float : left;
background-color: #e3d6c3

}


#kolumnaPrawa {
width : 641px;
height: 432px;
float : right;
padding : 20px red;
background-color: #e3d6c3; background-image: url(logowp3.jpg); background-attachment: fixed; background-repeat: no-repeat; background-position: center



}

Pokaż tę stronę na żywo.

Co to?
padding : 20px red;

Policz sobie: 641+252+2x20 > 913

~viking - stare IE (ew. nowe w Quirks Mode) zachowują się, jak box-sizing: border-box, w którym to paddingi nie mają wpływu na całkowity wymiar.

padding 20 red to pomyłka jakaś.

strony jeszcze nie mam na żadnym serwerze, jedynie na moim kompie, więc ciężko pokazać.

chodzi o to, ze ona działa tak jak powinna wszędzie poza IE. jest rozjechana. jak można zrobić żeby prawa i lewa kolumna przylegały do siebie i były wyśrodkowane? robie oddzielny arkusz CSS dla IE, ale nie wiem za bardzo nawet co mam pozmieniać (w sensie jak) nie znam polecenia które by zblizyło kolumne prawą do lewej i wrzuciło wszystko na środek strony.

spróbuj z dodaniem display:inline-table; // ew. inline // dla lewej i prawej strony

trzymaj następnym razem sprawdź wartości ponieważ jeśli dajesz np. width 100 + padding: 20 to twój box będzie miał rozmiar w przeglądarce 140 co za tym idzie przeglądarka Ci wrzuci pod spód

niestety to nie działa. display:inline-table nic mi nie zmienia a po zmianie całego kodu na taki jak napisałeś w IE strona jest nadal rozjechana a dodatkowo prawa kolumna poszła w dół w innych przeglądarkach

usuń display inline-table z mojego kodu i sprawdź ew. zmniejsz prawej kolumny width jeszcze o kilka px albo nawet narazie daj mu 400px

to nic nie daje. w innych przeglądarkach zepsuło a w IE nawet nie drgnęło. te wymiary generalnie pasują i strona wygląda dobrze w chromie czy operze. w IE prawa i lewa kolumna zamiast być przy sobie na środku są rozjechane jedna do lewego boku druga do prawego ...i ani drgnie.

a to tezeba było od razu pisać że Ci klei do przeglądarki wsadź prawą i lewą w div'a o wymiarach jak nagłówek powinno zadziałać

to też nic nie daje. prawa kolumna zlaczyła się z lewa i wyśrodkował się nagłówek dopiero po zmianie marginesu z auto na: margin-left : 170px;
margin-right : 170px;

ale obawiam się, ze to będzie działac tylko w tej konkretnej przeglądarce (IE 9) i na konkretnej rozdzielczości...więc marne rozwiązanie.

Tak więc nie będziesz zadowolony jak zobaczysz swoją stronkę na starszych przeglądarkach, a przecież jeszcze wiele osób używa starszej wersji IE niż 9.
http://www.my-debugbar.com/wiki/IETester/HomePage

Po pierwsze, nie zmieniaj wymiarów body tylko opakuj treść strony w kontener. Kod HTML powinien wyglądać tak:

[HTML] pobierz, plaintext 
<div id="container">
<div id="naglowek"></div>
<div id="kolumnaLewa"></div>
<div id="kolumnaPrawa"></div>
<div class="clear"></div>
</div>
[HTML] pobierz, plaintext 

Teraz możesz zająć się css:

[HTML] pobierz, plaintext 
body {
margin : 0px;
padding : 0px;
background-color: #fcf7f1;
scrollbar-base-color: 650c10;
scrollbar-track-color: #e3d6c3;
scrollbar-highlight-color: #e3d6c3;
scrollbar-arrow-color: #e3d6c3;
text-align: center;  <!-- wyśrodkowanie bloków dla IE -->
}
 
#container {
margin: auto; <!-- wyśrodkowanie bloków dla innych przeglądarek -->
width : 913px;
padding: 0px;
}
 
#nagłówek {
width : 913px;
height: 280px;
}
 
#kolumnaLewa {
width : 252px;
height: 452px;
float : left;
background-color: #e3d6c3
}
 
#kolumnaPrawa {
width : 621px;
height: 432px;
float : right;
padding : 20px;
background-color: #e3d6c3; background-image: url(logowp3.jpg); background-attachment: fixed; background-repeat: no-repeat; background-position: center;
}
 
.clear {
clear: both;
}
[HTML] pobierz, plaintext 

dzięki wielkie. teraz działa. zastanawia mnie tylko dlaczego po wyrzuceniu text-align: center; (tekst ma nie być wyśrodkowany) strona znowu się rozjedzona? da się to przeskoczyć zostawiając to polecenie i dodając oddzielny styl do każdego tekstu na stronie.

No niestety, żeby dopasować niektóre rzeczy pod IE, która stosuje własne standardy, trzeba stosować takie sztuczki. Żeby reszta divów miała normalne położenie tekstu (czyli od lewej) wystarczy dopisać:

[HTML] pobierz, plaintext 
div {
text-align: left;
}
[HTML] pobierz, plaintext