[CSS] Div werkt niet mee uit - Softwareontwikkeling

zondag 6 januari 2008 16:17

Acties:

Topicstarter

Ben bezig met een website, alles is bijna zo goed als af maar het wel bekende probleem,
In IE 7 alles goed in FF 2.0 gaat er 1 en andere fout.

Heb andere fouten al eruit kunnen halen door hier rond te speuren, maar voor dit probleem kan ik niet de oplossing vinden

Gaat om de volgende site http://www.millennium-toernooi.nl/www
Zoals je kunt zien gaat er 1 en andere fout in FF
1. De top border van de bottom div, komt boven me menu terecht
2. Bij een pagina zonder tekst, bijvoorbeeld pagina Algemeen, komt me bottom div helemaal bovenaan
opgelost dmv min-height in index
3. Bij een pagina met veel tekst,bijvoorbeeld pagina Deelnemers, gaat me index door me container heen en verplaatst die me bottom div onder me contact_right.

index.php

PHP:

<body>

    <div id="top">  
    </div>
        <div id="container"> 
            <div id="content_normal">
                <div id="menu">
                </div>
                    <div id="index">

                    </div>
            </div>
    
    <div id="content_right">
    </div>

        </div>  
    <div id="bottom">
    </div>

</body>

setup.css

PHP:

body {
    background-repeat: repeat-x;;
    background-position: 50% 0px;
    margin: 0px;
    margin-top:25px;
    text-align: center;
    background-image: url(../background.jpg);
    background-color:#33CC00;
}

html, body #container {
height:100%;
min-height:100%;
}

#container {
    width: 800px;
    text-align: left;
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
    border-left: 2px dotted #006699;
    border-right: 2px dotted #006699;
}
#top {
    height: 120px;
    width: 800px;
    background:url(../Top.png) no-repeat;
    text-align: left;
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
    border-bottom: 2px dotted #006699;
    border-right: 2px dotted #006699;
    border-left: 2px dotted #006699;
    border-top: 2px dotted #006699;
}

#content_normal {
    float:left;
    width:647px;
    border-right: 2px dotted #006699;
}

#content_right {
    float:right;
    width: 147px;
    height:450px;
    text-align:center;
}

#index {
    float:left;
    min-height:400px;
    width:630px;
    text-align:left;
    margin-top: 5px;
    margin-right: auto;
    margin-bottom: auto;
    margin-left: 5px;
}

#bottom {
    width:800px;
    border-bottom:2px dotted #006699;
    border-left:2px dotted #006699;
    border-right:2px dotted #006699;
    border-top: 2px dotted #006699;
    text-align: left;
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;

}

CCIE R&S

zondag 6 januari 2008 18:37

Acties:

Boelie-Boelie

probeer eens de floats te clearen, bijv. een clear:both op de footer of een overflow:hidden op de parent van de floats.

Cogito ergo dubito

zondag 6 januari 2008 21:32

Acties:

ts_rensuh

Topicstarter

Boelie-Boelie schreef op zondag 06 januari 2008 @ 18:37:
probeer eens de floats te clearen, bijv. een clear:both op de footer of een overflow:hidden op de parent van de floats.

Met een clear:both in me div bottom ben ik in FF heel me bottom div kwijt, in IE blijft alles goed
met een overflow:hidden te plaatsen knap de layout ook niet van op, in alle gevallen blijft alles in IE wel goed in FF gaat het fout

CCIE R&S

dinsdag 8 januari 2008 22:13

Acties:

ts_rensuh

Topicstarter

klein kikje ... iemand een idee ??
Kicken doen we niet binnen 24 uur. Zie ook: Het algemeen beleid #verboden

[ Voor 62% gewijzigd door BtM909 op 08-01-2008 22:15 ]

CCIE R&S