Floats footer en height probleem in IE

[Verwijderd]

Ik ben bezigmet een projectje voor school. In firefox werkt de hele pagina mooi, maar IE maakt er een lelijk zooitje van. De fbackground-color van de footer loopt door t/m borders van sidebar-div, dit zou niet horen. tevens werkt de min-height bij IEm is bekend. ik maakte gebruik van html 'div' {height: xyz;} oplosing. Dit vind FF niet zo leuk, de content van main-div wordt over footer-div gerendeerd.

Dit is de html-code:

HTML:

<div id="wrap">
    <div id="header">
    </div>
    <div id="main">
    </div>
    <div id="sidebar">
    </div>
    <div id="footer">
    </div>
</div>

Cascading Stylesheet:

    body {
        margin:0;
        padding:15px;
        background-color:#4C6BB5;
        color:#333333;;}

    #wrap {
        margin:0 auto;
        width:750px;
        border: 1px solid #FFFFFF;
        background-color: #A0522D;}

    #header {
        clear:both;
        padding-left:20px;
        padding-top:5px;
        text-align:center;
        background-color:#DCDCDC;
        border-bottom: 1px #FFFFFF solid;}

    #main {
        color:#595959;
        background-color:#FFF6DF;
        clear: left;
        float:left;
        width:500px;
        min-height:450px;
        border-right: 1px solid #FFFFFF;}

    #sidebar {
        color: #FCFCFC;
        height: 100%;
        width:249px;
        background-color:#A0522D;
        float:left;
        clear:right;}

    #footer {
        background-color:#FFBC00;
        clear:both;
        border-top: 1px #FFFFFF solid;}

overbodige shit weggelaten

hier is mijn testpagina te vinden;Webpagina

Waar zit de fout, of hoe moet dit probleem worden opgelost?

[ Voor 6% gewijzigd door Verwijderd op 01-05-2005 17:29 ]

[Rowanov]

Ik denk dat je met Faux-Collumns een heel eind moet komen.

[coubertin119]

Ik vraag me af waarom clear:right; bij je #sidebar staat, voor de rest kent Internet Explorer het min-height property niet waardoor de hoogte van je container wordt bepaald door de inhoud en niet door je stylesheet.

Dan is in elk geval je hoogte in orde, maar je probleem met de floats zie ik zo snel niet.

_{Je hebt ook last van 'divitis', waarom wrap je die ul nog in een div? Waarom die footer nog in een div? Bovendien is je DTD HTML terwijl de rest van je pagina XHTML is.}

[ Voor 9% gewijzigd door coubertin119 op 01-05-2005 17:42 ]

[Verwijderd]

Divitis, zekers ja.

Waarom html ipv. xhtml DTD? laatst hele topic gelezen over xhtml met content="text/html". Dit gaat altijd door de sgml-parser heen, dus.

Probleem is dus dat de footer-div achter main-div doorloopt EN tot aan border van sidebar-div loopt.

[r0bert]

offtopic:
Hey TS, heb je een emailadres ? Heb een opmerking, maar niet echt verstandig om dat hier te posten denk ik

[ Voor 6% gewijzigd door r0bert op 01-05-2005 18:04 ]

[Verwijderd]

U've got mail

[Verwijderd]

ik heb de Faux Columns bekeken, daar gaat het 2 divjes naast elkaar met background-color. Mijn probleem is dat IE de footer-div echt raar rendeerd. Deze llopt eebn stuk in sidebar-div door, waarbij de border van footer-div alleen in sidebar staat.

[wicher|IA]

Volgens mij is het probleem niet dat je footer verkeerd wordt gerenderd, maar dat je sidebar niet lang genoeg is. En dat kun je wel degelijk goed oplossen met de faux columns.

[Sappie]

zoals coubertin119 al zegt kent IE de css property "min-height" niet. Dit is echter makkelijk te omzeilen met bijvoorbeeld de IE only underscore hack icm de "height" property die IE interpreteert als zijnde min-height. Zo dus:

code:

min-height: 450px;
_height: 450px; /* IE only */

Verder geef je je sidebar ipv height: 100% dezelfde height properties als je main (deze zijn / lijken immers toch altijd even hoog). Voor de rest zal je toch echt nog ff beter naar de Faux Columns kunnen kijken . Daarmee is je layout zeker te bewerkstelligen

[ Voor 11% gewijzigd door Sappie op 02-05-2005 00:07 ]

[Verwijderd]

ik nog eens goed de Faux Column principe van ala gelezen, maar is niet wat ik zoek. Ik heb namelijk al de background-color van de wrapper-div naar de background-color van de sidebar veranderd.

FF gaat het gewoon goed, echter bij IE treed de Footer buiten zijn oevers dit heeft niets te maken met geen 100% height van mijn sidebar. De ruimte onder de sidebar-div zou gevuld moeten worden met de background-color van de wrapper-div.

[BtM909]

Kan het kloppen dat het nu allemaal hetzelfde eruit ziet in IE en FF?

[Verwijderd]

BtM909 schreef op maandag 02 mei 2005 @ 23:21:
Kan het kloppen dat het nu allemaal hetzelfde eruit ziet in IE en FF?

Nee, het ziet het zelfde uit. FF heeft geen last van probleem mbt. footer-div. Alleen IE treed "buiten zijn oevers." Het lijkt mij een nieuwe vinding wanneer men L-vorimge divs zou kunnen maken, anders hou ik het op een rendeerfout in IE

[ Voor 21% gewijzigd door Verwijderd op 03-05-2005 00:09 ]

[Verwijderd]

De pagina werkt niet voor mij. (Wit scherm.) Mocht dit komen doordat je er nog mee bezig bent, zou je dan een geisoleerde, .html, pagina kunnen opzetten waar wij naar kunnen kijken?

[Sappie]

offtopic:
Hier doet ie t ook ff niet.. vermoed dat ie em host op zn eigen bak en nog niet wakker is ofzo

[ Voor 10% gewijzigd door Sappie op 03-05-2005 11:15 ]

[Verwijderd]

Nee nee, ik zat alweer netjes op mijn werk. Mijn bak zou op poort 81 te benaderen zijn. Ik kan het hier niet checken wan de ISA-server houdt hier poort 81 tegen. Via telnet krijg ik contact op poort 81. Ik bekijk dit vanavond ff.

[Verwijderd]

Verwijderd schreef op dinsdag 03 mei 2005 @ 11:54:
Nee nee, ik zat alweer netjes op mijn werk. Mijn bak zou op poort 81 te benaderen zijn. Ik kan het hier niet checken wan de ISA-server houdt hier poort 81 tegen. Via telnet krijg ik contact op poort 81 via andere (FreeBSD)bak.. Ik bekijk dit vanavond ff.

Is ie nou wel te bereiken? Anders snap ik er niets van. FF services herstart.

[ Voor 11% gewijzigd door Verwijderd op 03-05-2005 18:34 ]

[Verwijderd]

Moest de PC rebooten, anders ging Wamp niet meer werken. Nu kan ik lokaal ook weer bij sites.

Nou check de link 'statistieken' maar onder IE, dan zie je het probleem.

[r0b]

Een plaatje zegt meer dan duizend woorden:

offtopic:
Gemaakt door Henk?!

[ Voor 30% gewijzigd door r0b op 03-05-2005 19:00 ]

[Verwijderd]

Zo ziet 'ie er bij mij onder IE version 6.0.2900.2180.xpsp2_gdr..... uit

[ Voor 25% gewijzigd door Verwijderd op 03-05-2005 19:22 ]

[Sappie]

je hebt t al opgelost nu? Ik zie iig niets fouts (meer) in IE.

edit:
niet verder gekeken dan mn neus lang is

[ Voor 31% gewijzigd door Sappie op 03-05-2005 22:03 ]

[Verwijderd]

Sorry, maar het is niet opgelost. zie alleen al statistieken-link. Zie de footer, klopt van geen centimeter.

De footer behoort een rechte div te zijn. Nu wordt dus nog eens voor een gedeelte in sidebar-div (navigatie) weergegeven. Zie achter grond kleuren -> De hele sidebar-div behoort compleet bruin te zijn, dit is de background-color van de sidebar en ook van de wrapper-div.

[ Voor 57% gewijzigd door Verwijderd op 03-05-2005 21:43 ]