[CSS] Internet Explorer / Firefox probleem..

[Black-Xjuh]

Ik werk aan een site die te zien is op http://www.comon-invent.com:8080 ik heb echter een probleem. In Internet Explorer ziet hij er goed uit, in Firefox ook.. Het probleem komt als je in het menu gaat naar Producten > Tankopslag > Online Monitoring. Dan word het tekstblok langer en schuift de footer in Internet Explorer netjes mee.

De footer doet dit echter niet in Firefox en komt over de tekst heen te staan. Dat is dus mijn probleem waar ik geen oplossing voor kan vinden. Heb het uberhaupt niet goed gekregen in Firefox, ook niet op een manier dat het in Internet Explorer fout gaat of iets..

De index.php ziet er globaal zo uit:

HTML: index.php

<div id="container">
    <div id="header">
        <img src="templates/default/pix/logo.gif" class="logo" alt="Comon Invent" />
        <a href=""><img src="templates/default/pix/login.jpg" class="login" alt="Klanten Login" /></a>
    </div>

    <div id="top">
        <h1>Welkom bij Comon Invent</h1>
    </div>

    <div id="main">
        <div id="menu">
        </div>
        
        <div id="content">
        </div>
    </div>

    <div id="footer">
        <div id="text"><a href="" class="footer">Algemene Voorwaarden</a> - Comon Invent - <a href="" class="footer">Contact</a> - <a href="?option=com_user&view=login" class="footer">Klanten Login</a></div>
    </div>
</div>

De css:

Cascading Stylesheet: template.css

#container{
    position: absolute;
    margin-left: -398px;
    width: 796px;
    z-index: 0;
    height: 100%;
    left: 50%;
    border: 0px;
}

#header{
    float: top;
    width: 100%;
    height: 100px;
}

#top {
    width: 100%;
    height: 50px;
    background: #ccc url(../pix/bg2.gif) repeat-y 50% 0;
    margin-bottom: 17px;
    border-top: 2px solid;
    border-bottom: 2px solid;
}
#top #text{
    font-size: 12pt;
    margin-top: 15px;
    font-weight: bold;
}

#main {
    position: relative;
    margin-left: -390px;
    width: 780px;
    min-height: 500px;
    left: 50%;
}
#menu {
    position: relative;
    width: 202px;
    min-height: 500px;
    background: #ffffff;
    float: left;
    margin-top: -8px;
    margin-bottom: -2px;
    padding: 5px;
    border: 1px solid;
    line-height: 22px;
}
#content {
    position: relative;
    width: 545px;
    min-height: 500px;
    background: #ffffff;
    float: right;
    margin-top: -8px;
    margin-bottom: -2px;
    padding: 5px;
    border: 1px solid;
}

#footer{
    position: relative;
    width: 100%;
    height: 50px;
    background: #ccc url(../pix/bg2.gif) repeat-y 50% 0;
    margin-top: 10px;
    border-top: 2px solid;
    border-bottom: 2px solid;
}
#footer #text{
    font-size: 10pt;
    margin-top: 17px;
    text-align: center;
    font-weight: normal;
}

Ik heb overigens al het een en ader geprobeerd met position: relative, absolute.. Wat met float: bottom en dergelijke. Ook heb ik een beetje lopen schuiven met de divjes, footer bijvoorbeeld in main en dergelijke maar niks leek te helpen. Eerst bleef de footer altijd bovenaan staan, net onder de top zeg maar, dit heb ik toen wel opgelost door position absolute te maken..

[ Voor 6% gewijzigd door Black-Xjuh op 23-01-2008 10:22 ]

[TeeDee]

clear:both; toevoegen aan je #footer zou moeten werken.

[Black-Xjuh]

Bedankt, dit is inderdaad oplossing.

Zit nog wel wat geks in met marges maar hij is in ieder geval te bekijken dus kan nu in ieder geval weer verder..

Dit antwoord is natuurlijk goed genoeg maar wat doet clear: both; wat houd het in zeg maar?

[H004]

CSS clear Property

Clear geeft dus aan aan welke zijden van het element er niet gefloat mag worden.

[ Voor 34% gewijzigd door H004 op 23-01-2008 12:33 ]