Problem FireFox a IE tabele i paski przewijania, Każda przeglądarka inaczej interpretuje Opcje

[verbos]

na stronie :
Pod tym linkiem
pod IE jest wszystko w porządeczku zaś pod FireFoxem jest nieszczęsne przesunięcie dolnego menu i nie mogę tego wyrównać, aby ładnie wyglądało....
Czy ma ktoś może pomysł jak to zrobić aby było równo poustawiane??
Podpowiem, że na siłę wstawienie (wymuszenie) w dolnej części suwaczka nie bardzo wychodzi i poza tym nie jest estetyczne
Proszę o pomoc w tej sprawie i pozdrawiam

[revyag]

Według mnie, kod strony powinien być napisany od nowa. Dlaczego ? Ramki ! Tworzenie strony w ten sposób to jest archaizm i uwstecznianie się. No i problemy z wyglądem pod różnymi przeglądarkami.
Proponuję wywalić ramki i zamienić to na divy. Kodu będzie mniej, łatwiej będzię się połapać, no i szanse że pojawi się jakiś problem są o wiele mniejsze.

Struktura:

CSS:
//całość chyba chcesz mieć wycentrowaną w pionie i w poziomie,

Kod

div#cont {
    width:780px;
    height: 480px;
    position:absolute;
    left: 50%;
    margin-left: -390px;
    top:50%;
    margin-top: -240px;
}
div#main {
    width:100%;
    height:405px;
    overflow:auto;
}
div#menu {
    width:100%;
    height:75px;
}

[HTML] pobierz, plaintext 
<div id="cont">
    <div id="main">
        <!--tu wstawiasz tresc-->
    </div>
    <div id="menu">
        <!--a tu menu--->
    </div>
</div>
[HTML] pobierz, plaintext 

[verbos]

ooo już jest jakaś szansa na regulację.... powiedz mi tylko czy jest szansa na dokładne wyregulowane tła na podkład?? czyli tego obrazka - musi być nieruchomy. Mam taki kod:

Kod

<STYLE type="text/css">

BODY
{
background-color: #FFFFFF;
background-image: url(images/menu_bckgrnd.jpg);
background-position: absolute;
   left: 50%;
   margin-left: -390px;
   top:50%;
   margin-top: -240px;

background-attachment: fixed;
background-repeat: no-repeat
}
div#cont {
   width:780px;
   height: 480px;
   position:absolute;
   left: 50%;
   margin-left: -390px;
   top:50%;
   margin-top: -240px;
}
div#main {
   width:100%;
   height:405px;
   overflow:auto;
}
div#menu {
   width:750px;
   height:75px;
}
</STYLE>

a link po poprawkach tu:
tutaj
Dziwmi mnie tylko jeszcze to, że za to w IE wywala mi sotronkę o wiele niżej
Pozdrawiam

[revyag]

Obrazek dajesz tam gdzie ma być treść. czyli w divie #treść.

Kod

div#main {
    background-image: url(images/menu_bckgrnd.jpg);
    background-attachment: fixed;
    background-repeat: no-repeat
    width:100%;
    height:405px;
    overflow:auto;
}

[verbos]

no już prawie pięknie... już prawie super.... ale 2 sprawy mnie dziwią....
1) Czy wiesz może dlaczego w IE jest pustka na górze strony i aby ją zobaczyć trzeba całość przewinąć w dół
2) dziwi mnie, że bacground jest e FF przesunięty jakby w fazie o ileś tam.... dziwne prawda??
Raz jeszcze dzięki za dotychczasową pomoc i plis o dalszą....

[revyag]

Wywal z body te topmargin i leftmargin.
Ustaw rozmiar div#cont na 760px daj dla tego diva margin-left: -380px.

[verbos]

Wywalone...
ale nadal IE przenosi całość na dół....
i FF nie rozciąga image background mimo, że powinien być większy

[revyag]

Zobacz jak masz zrobione tabele. Rozciągają one content, dlatego jaest taki efekt. Wywal całkiem tabelkę i sprawdź tylko te divy. Zobaczysz że jest ok.
Policz sobie sumaryczną szerokość i wysokość kolumn tabeli, będziesz wiedział dlaczego efekt jest taki jaki jest

[verbos]

Zrobiłem deczko inaczej.... czyli po prostu 2 divy niezależne (nie wiem czy to błąd czy dobrze... ale w obu przypadkach działa) a
background: url(...
wstawiłem po prostu jako background body i tyle ;/ no troszkę na chama... ale działa...
Bo jak mi się zdaje, inaczej początek div'a interpretuje IE a inaczej FF, więc absolutnie nie mogły być absolutne pozycje
Dzięki raz jeszcze za helpa