[html i css] 100% długości i "padding"?

[bwo]

Witajcie, mam 2 pytania.
1. Jak zrobić żeby warstwa była na 100% height okna? jest to głowna warstwa zaraz po BODY i daje jej w css - height:100% to w ff i operze ma tak jakby auto a w IE jest prawie na 100% długości, ale i tak we wszystkich tych rpzeglądarkach jest odstęp od górnej i dolnej krawędzi okna. Wiecie jak to zlikwidować?

2. Mam 2 warstwy, jedna w drugiej. Jak tej w środku dam padding: 5px; to jej rozmiary w FF i operze zwiekszają się o 5px w każdą stronę a w IE są takie jak były. Jak zrobić odstępy wewnątrz warstwy (czyli padding) tak, aby nie zwiekszało to jej rozmiarów? Czyli żeby było tak jak w IE.

Z góry dziękuje.

[Stig]

1. (...) ale i tak we wszystkich tych przeglądarkach jest odstęp od górnej i dolnej krawędzi okna. Wiecie jak to zlikwidować?

Jeśli dobrze Cię zrozumiałem to ten problem można rozwiązać wstawiajać argumenty margin i padding o wartości 0 dla elementu body.

2. Mam 2 warstwy, jedna w drugiej. Jak tej w środku dam padding: 5px; to jej rozmiary w FF i operze zwiekszają się o 5px w każdą stronę a w IE są takie jak były. Jak zrobić odstępy wewnątrz warstwy (czyli padding) tak, aby nie zwiekszało to jej rozmiarów? Czyli żeby było tak jak w IE.

IE (starsze od 6.0 i 6.0, ale bez odpowiedniej deklaracji typu), w przeciwieństwie do nowoczesnych przeglądarek takich jak Opera i Mozilla, w błędny sposób interpretuje model blokowy. Wstawiając padding i chcąc zachować tą samą szerokość musisz o odpowiednią liczbę zmniejszyć wartość argumenty width (w Twoim przypadku 2*5px=10px). Niestety, to rozwiązanie powoduje błąd w badzIEwiu. W tym celu musisz zastosować tzw. Tan hack. Na czym to polega? Ano na tym, że IE niepoprawnie interpretując specjalnie spreparowany kod wykona go, a nowoczesne przeglądarki go pominą. Ograniczę się do zademonstorwania tego typu rozwiązania na Twoim przykładzie:

Kod: Zaznacz cały

div#div {
width: 290px;
padding: 5px;
}
* html div#div {
width: 300px;
w\idth: 290px;
}

Rozwiązanie to jest kompatybilne tylko w przypadku deklaracji typu ustawionej na język XHTML. Po szczegóły odsyłam do google.

[bwo]

1. Fajnie, działa =] Nie wpadłem na to ze to może byc odstęp od krawędzi okna BODY, a nie div'a.
Ale jeszcze jak zrobić żeby było na całej długości? Bo Opera i FF ignorują %. Tylko w IE działą height: 100%;

2. Poszukam na google o tym tan hacku, bo nie słyszlame o nim i nie wiem gdzie to wkleić.

Dzięki =]

[Stig]

1. Fajnie, działa =] (...) Ale jeszcze jak zrobić żeby było na całej długości? Bo Opera i FF ignorują %. Tylko w IE działą height: 100%;

Musisz nadać height: 100% zarówno dla div'a jak i dla elementu html i body np.:

Kod: Zaznacz cały

html,body, div {
height: 100%;
}
div {
background-color: #FF0000;
}

2. Poszukam na google o tym tan hacku, bo nie słyszlame o nim i nie wiem gdzie to wkleić.

Ciekawie opisany został on tutaj.

[bwo]

Stig - rządzisz =]

Ale mam jesczze jedno pytanko. Mam ustawioną długość na 100% i pare procent powierzchni tego diva jest wykorzystane przez innego diva który ejst w środku. I problem jest taki... Chce do głownej warstwy wstawić jesczze jednego diva, tak żeby zajmował resztę powierzni, czyli to niewykoorzystane pole. Jak daje height: 100% to mi wyjeżdża poza warstwe w któej się znajduje... rozumiecie mnie? =P Chcę, żeby warstwa była w odległości 10px od dołu warstwy głownej, ale position: absolute; odpada bo jeśli warstwa łowna bedzie dłuższa niż długośc okna przeglądarki to warstwa nie przesunie się w dół tylko bedzie 10px od krawędzi okna przeglądraki.