No replies
zdzislavv
Offline
newbie
Last seen: 11 years 18 weeks ago
Timezone: GMT+2
Joined: 2009-05-17
Posts: 1
Points: 0

Hello everybody!
In fact it is my first website and I have got some problems with bottom of the page. I check this html in two browsers - Internet Explorer and Mozilla Firefox. In the case of IE it looks more or less fine, but in MF doesn't look good. And, nevertheless, everything collapses when I lengthen the text - replace "Text" with "Tekst

Tekst
Tekst ...".
Here is the page http://rapidshare.com/files/233835638/_forum.zip.html .
Please help me fix it Smile.

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Page</title>
    <style type="text/css">
    <!--
    @import url("css/style.css");
    -->
    </style>
<script type="text/javascript" language="JavaScript1.2" src="java\stm31.js"></script>
</head>
<body class="main_body">
 
 
<div id="tlo">
</div>
<div id="glowna" align="center"> <!--- wysrodkowanie calosci strony --->
    <div id="gora">
        <div id="logo">
        <img src="http://images40.fotosik.pl/121/9ed50a49145d1c5c.jpg">
        </div>
        <div id="logo2">
        <img src="http://images47.fotosik.pl/126/797f0f8ede178374.jpg">
        </div>
    </div>
    <div id="srodek">
        <div id="lewa">
            <div id="menu">
                <!--#include file="menu.html" -->
            </div>
        </div>
        <div id="prawa">
            <div id="o_firmie">
                <div id="o_firmie_txt">
                    <span class="font_o_firmie">
                        <img src="http://images49.fotosik.pl/125/6ccfd13999f6fcc0.gif"> <br>
                    </span>
                    <span class="font_o_firmie2">
                        Tekst.
                    </span>
                </div>
                <div id="o_firmie_img">
                    <img src="http://images50.fotosik.pl/125/bcf3b1be31f29f97.jpg">
                </div>
            </div>
            <div id="inf">
                <div id="inf_handl" class="font_inf_handl">
                    <img src="http://images40.fotosik.pl/121/d17d843a631dbe2c.gif"> <br><br>
                    Firma <strong>Jakastam</strong> <br>
                    Ulica Jakastam <br>
                    11-111 Gdziestam <br><br>
                    tel. (0-32) 111-11-11 <br>
                    fax 23242343243
                </div>
                <div id="inf_gosp" class="font_inf_gosp">
                    <img src="http://images47.fotosik.pl/126/da3103b3f550d6d6.gif"> <br>
                </div>
            </div>
        </div>
    </div> <!-- koniec div srodek -->
</div> <!-- koniec div glowna -->
 
<div id="dol" align="center">
    <div id="stopka" class="font_stopka" align="right">
        Na razie w stopce niczego nie ma. <br>
        <p>
            <a href="http://validator.w3.org/check?uri=referer">
                <img style="border: 0pt none ; width: 88px; height: 31px;" src="http://images50.fotosik.pl/125/2e8beab34b5e998c.png" alt="Valid HTML 4.01 Strict">
            </a>
            <a href="http://jigsaw.w3.org/css-validator/check/referer">
                <img style="border: 0pt none ; width: 88px; height: 31px;" src="http://images46.fotosik.pl/125/f6ae447524b5e389.png" alt="Poprawny CSS!">
            </a>
        </p>
    </div>
</div>
 
</body>
</html>

CSS:

.main_body {
    margin-top: 18px;
    margin-bottom: 60px;
    background-color: #009300;
}
 
 
#tlo {
    width: 100%;
    height: 135px;
    background: #00008B; /* kolor gornego podtla */
    position: absolute; /* absolute - wzgledna do main */
    top: 18px; /* top taki sam jak w .main_body */
    left: 0px;
}
 
#glowna {
    position: relative;
}
 
#gora {
    width: 902px; /* szerokosc calej gory */
    height: 139px;
    border: 1px solid #000000;
    background-color: #80FF80; /* kolor tla pod logiem */
}
 
#logo {
    float: left;
    padding-left: 2px;
    padding-top: 2px;
}
 
#logo2 {
    float: right;
    padding-right: 5px;
    padding-top: 5px;
}
 
#srodek {
    width: 902px;
    min-height: 310px; /* dobrac wartosc pod katem MF */
    height: auto;
    clear: both;
    background-color: #00E800;
    border-left: 1px solid #004000;
    border-right: 1px solid #004000;
    border-bottom: 1px solid #004000;
}
 
#lewa {
    float: left;
    width: 180px; /* szerokosc lewej kolumny */
    height: auto;
}
 
 
#menu {
    width: 180px; /* menu.width = lewa.width */
    height: auto;
    padding-top: 20px; /* margines gorny menu */
    padding-left: 10px; /* dodana opcja dla lewego marginesu */
    padding-bottom: 20px; /* czy dziala jako PRZYNAJMNIEJ (preferred) czy jako DOKLADNIE ? */
}
 
#prawa {
    float: right;
    width: 706px; /* szerokosc, pamietac, ze do prawej jest wyrownane 706px */
    height: auto;
    overflow: auto;
}
 
#o_firmie {
    width: 706px;
    height: 137px; /* wysokosc "o firmie" 197 */
    padding-top: 16px; /* margines gorny */
    text-align: left;
    min-height: 183px; /* dodalem ze wzgledu na Mozille Firefoksa */
}
 
#o_firmie_txt {
    float: left;
}
 
#o_firmie_img {
    float: right;
    padding-right: 21px;
}
 
#inf {
    padding-top: 10px;
}
 
#inf_handl {
    float: left;
    width: 50%;
    min-height: 211px;
    height: auto;
}
 
#inf_gosp {
    float: left; /* na lewo od sasiadujacego elementu !!! */
    width: 50%;
    min-height: 211px;
    height: auto;
}
 
#dol {
    position: absolute;
    width: 902px;
}
 
#stopka {
    float: right;
    padding-left: 5px;
    padding-top: 5px;
    padding-right: 5px;
}

And this is structure of divs:

tlo
glowna
--- gora
--- --- logo
--- --- logo2
--- srodek
--- --- lewa
--- --- --- menu
--- --- prawa
--- --- --- o_firmie
--- --- --- inf
--- --- --- --- inf_handl
--- --- --- --- inf_gosp
dol
--- stopka

By the way, why doesn't work?

Greetings and thanks in advance!