[css] Firefox vs. IE - "rozjeżdżanie" się strony

[effka]

Witam,
mam problem z dostosowaniem kodu do IE dla tej storny:
http://www.tpzw.ngo.org.pl/index.html - w Firefoxie strona wyświetla się tak jak chciałam, w IE "rozjeżdża" się menu górne i stopka i za nic nie mogę dojść dlaczego.

Poniżej arkusz stylów. Na razie działa tylko str. główna i "historia".

Kod:

html {margin: 0; padding: 0;}
body {font: 11px Verdana, Arial, Helvetica, sans-serif; background-color: #445a1b;}
h1 {font-size: 150%; color: #333333; letter-spacing: 1px; margin: 1em; padding: 10px 0 0 0;}
h2 {font-size: 133%; margin: 0; padding: 15px 0 5px 60px; border-bottom: 1px solid gray; background-image: url("images/tree.jpg"); background-repeat: no-repeat;}
h3 {font-size: 100%; color: gray; padding: 5px 0 5px 20px; margin: 0; border-left: 1px solid gray; background-image: url("images/dbrown.jpg"); background-repeat: repeat-y; border-top: 1px solid gray;}

p {line-height: 1.66; margin: 2em; 3em 0em 0em; text-align: justify;}

div#tin {width: 800px; height: 780px; border: 0; background-color: white; position: absolute; margin: 10px 112px 0 0;padding: 0 0 2em 0; left: 112px; right: 80px; top: 0px;}

div#head1 {height: 28px; background-image: url("images/bg-head1.jpg"); repeat: no-repeat; padding: 0;}
div#head2 {height: 111px; background-image: url("images/bg-head2.jpg"); repeat: no-repeat; padding: 0;}
div#head3 {height: 39px; width: 800; padding: 0; margin: 0;}
div#head3 a {float: left;}
div#head4 {height: 41px; background-image: url("images/bg-head4.jpg"); repeat: no-repeat; padding: 0;}

div#maincontent {
   margin: 0px;}
div#left-side {margin: 0 0 0 15px; padding: 0 10px 0 0; float: left; width: 170px;}
div#left-side a {display: block; padding: 5px 0 5px 20px; margin: 0; text-decoration: none; color: gray; border-left: 1px solid gray; background-image: url("images/lbrown.jpg"); background-repeat: repeat-y; border-top: 1px solid gray;}
div#left-side a:hover {background: rgb(85%,85%,70%); color: silver;}
  
div#right-side {display: block; margin: 0 15px 0 10px; padding: 0 0 0 10px; float: right; width: 130px;}
div#main {margin: 0 140px 1em 26%; padding: 0;}    
div#foot {position: absolute; bottom: 0px; height: 41px; width: 800px; background-image: url("images/foot.jpg"); repeat: no-repeat; padding: 0; text-align: center;}

p.ft {line-height: 1.66; margin: 1em; 3em 2em 0em; text-align: center;}
p.ngo {line-height: 1.66; margin: 2em; 3em 1em 0em; text-align: center;}


a.file {border: 0; text-decoration: none; padding: 0 5px 0 0px;}

[Marcin]

Użyj takiego rozwiązania dla menu

Kod:

div#left-side {margin: 0 0 0 5px; padding: 0 10px 0 0; float: left; width: 170px;}
html>body div#left-side {margin: 0 0 0 15px;}

Dla stopki

Kod:

div#foot {height: 41px; width: 800px; background: url("images/foot.jpg") bottom left no-repeat; padding: 0; text-align: center;}

Jeśli nie wskoczy na swoje miejsce to pokombinuj z float:left i display:block;

[effka]

Przy takim kodzie zaczyna się też rozjeżdżać w Firefoxie, a w IE stopka ucieka do góry.

No trudno, kombinuję dalej...

[kmd]

Jeśli chodzi o najnowszy Internet Explorer to wszystko jest pod nim dobrze. Nic sie nie rozjeżdża.

[effka]

Jeśli chodzi o najnowszy Internet Explorer to wszystko jest pod nim dobrze. Nic sie nie rozjeżdża.

Prawie. Stopka odjeżdża w prawo.

[kmd]

Hmm racja nie zauważyłem tego.
A może w takim razie spróbuj dodać do stopki:

Kod:

left: 0px;

Niech zaczyna się od samego początku maincontent

[effka]

Kod:

left: 0px;

Niech zaczyna się od samego początku maincontent

To było to - idealnie, dzięki!
Posiedzę jeszcze tylko nad wersją dla IE6...