[FF] body 100% van pagina, niet zichtbaar venster - Softwareontwikkeling

woensdag 4 januari 2006 12:31

Acties:

Verwijderd

Topicstarter

Goedendag allemaal,

Ik ben al een tijdje iets aan het proberen (http://roemer.dutch-design.net/new/), heb er al veel over opgezocht maar nergens kan ik de oplossing vinden.

Ik wil een pagina maken die eruit ziet als 1 gecentreerde kolom. Die kolom moet van boven naar beneden lopen. Hoever ik nu ben lukt het ook als de content maar een paar regels is, dat de kolom alsnog van boven naar beneden loopt, in zowel FF als IE.
Maarnu, als de content langer wordt dan het venster, houd in FF de container div, en de body, op bij het einde van het eerste venster. Ter verduidelijking de code:

code:

<style>
html, body
{
 height:   100%;
}

html {
 margin:   0px;
 padding:  0xp;
 background: yellow;
}


body {
 text-align:  center;
 background-color: purple;
 margin:   0px;
 padding:  0px;
}

div#container {
 border-left: 1px solid red;
 border-right: 1px solid red;
 
 width:   600px;
 margin:   0px auto;
 padding:  0px;
 
 background-color: green;
 height:   100%;
 }

div.content {
 padding:  0px 5px 1px 5px;
}

img#header {
 height 100px;
 width 600px;
 border: 0px;
}
</style>

code:

<body>
<div id="container">
[img]"images/header_blank.jpg"[/img]
<div class="content">
<h1>Welkom op .>NET</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris eget turpis. Sed augue leo, mollis non, placerat vel, mollis id, eros. Cras a sem sit amet purus aliquam ornare. Mauris dictum rutrum massa. Proin nisi. In diam purus, sodales eu, congue eget, rutrum at, nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum dui. In hac habitasse platea dictumst. Vivamus non enim nec metus vehicula dapibus. Sed quis erat id quam laoreet facilisis. Nullam tempus mauris vitae eros. Curabitur tellus. Ut est est, lacinia ac, varius ut, tincidunt vel, neque. Integer sollicitudin lacus a libero. Nulla a nulla. Nam vitae nulla. Morbi non nisl eu ipsum ultrices hendrerit. Phasellus lobortis feugiat velit.</p>
<p>Suspendisse pretium. Duis eros augue, porta ultricies, laoreet vitae, convallis eget, nisi. In euismod aliquam lorem. Ut quis lorem vel enim ultricies luctus. Pellentesque vitae erat vel lacus feugiat lobortis. Praesent iaculis leo at diam. Aenean magna quam, suscipit sit amet, sodales sed, porta et, massa. Quisque ante tellus, luctus a, commodo in, consectetuer non, lorem. Donec velit. Sed dignissim magna at odio. Vivamus vitae ipsum.</p>
<p>Nulla pede ane, ultrices ut, malesuada in, mattis a, tortor. Etiam convallis arcu ac turpis aliquet egestas. Curabitur egestas, nisi quis aliquam laoreet, diam diam pharetra neque, sollicitudin pretium mauris neque mollis lorem. Sed odio. Donec sagittis justo. Fusce eget sem. Nam semper, eros ac pulvinar mollis, eros nisi venenatis lectus, eget malesuada arcu odio id sem. Mauris ac urna sed metus pulvinar iaculis. Nullam nulla ligula, sollicitudin vel, sodales in, elementum id, enim. Mauris odio enim, volutpat et, ullamcorper a, tempus quis, ante. Nullam est justo, consequat eget, luctus in, vulputate eu, lectus. Nullam quis leo ullamcorper ante consequat tincidunt.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris eget turpis. Sed augue leo, mollis non, placerat vel, mollis id, eros. Cras a sem sit amet purus aliquam ornare. Mauris dictum rutrum massa. Proin nisi. In diam purus, sodales eu, congue eget, rutrum at, nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum dui. In hac habitasse platea dictumst. Vivamus non enim nec metus vehicula dapibus. Sed quis erat id quam laoreet facilisis. Nullam tempus mauris vitae eros. Curabitur tellus. Ut est est, lacinia ac, varius ut, tincidunt vel, neque. Integer sollicitudin lacus a libero. Nulla a nulla. Nam vitae nulla. Morbi non nisl eu ipsum ultrices hendrerit. Phasellus lobortis feugiat velit.</p>
<p>Suspendisse pretium. Duis eros augue, porta ultricies, laoreet vitae, convallis eget, nisi. In euismod aliquam lorem. Ut quis lorem vel enim ultricies luctus. Pellentesque vitae erat vel lacus feugiat lobortis. Praesent iaculis leo at diam. Aenean magna quam, suscipit sit amet, sodales sed, porta et, massa. Quisque ante tellus, luctus a, commodo in, consectetuer non, lorem. Donec velit. Sed dignissim magna at odio. Vivamus vitae ipsum.</p>
<p>Nulla pede ane, ultrices ut, malesuada in, mattis a, tortor. Etiam convallis arcu ac turpis aliquet egestas. Curabitur egestas, nisi quis aliquam laoreet, diam diam pharetra neque, sollicitudin pretium mauris neque mollis lorem. Sed odio. Donec sagittis justo. Fusce eget sem. Nam semper, eros ac pulvinar mollis, eros nisi venenatis lectus, eget malesuada arcu odio id sem. Mauris ac urna sed metus pulvinar iaculis. Nullam nulla ligula, sollicitudin vel, sodales in, elementum id, enim. Mauris odio enim, volutpat et, ullamcorper a, tempus quis, ante. Nullam est justo, consequat eget, luctus in, vulputate eu, lectus. Nullam quis leo ullamcorper ante consequat tincidunt.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris eget turpis. Sed augue leo, mollis non, placerat vel, mollis id, eros. Cras a sem sit amet purus aliquam ornare. Mauris dictum rutrum massa. Proin nisi. In diam purus, sodales eu, congue eget, rutrum at, nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum dui. In hac habitasse platea dictumst. Vivamus non enim nec metus vehicula dapibus. Sed quis erat id quam laoreet facilisis. Nullam tempus mauris vitae eros. Curabitur tellus. Ut est est, lacinia ac, varius ut, tincidunt vel, neque. Integer sollicitudin lacus a libero. Nulla a nulla. Nam vitae nulla. Morbi non nisl eu ipsum ultrices hendrerit. Phasellus lobortis feugiat velit.</p>
<p>Suspendisse pretium. Duis eros augue, porta ultricies, laoreet vitae, convallis eget, nisi. In euismod aliquam lorem. Ut quis lorem vel enim ultricies luctus. Pellentesque vitae erat vel lacus feugiat lobortis. Praesent iaculis leo at diam. Aenean magna quam, suscipit sit amet, sodales sed, porta et, massa. Quisque ante tellus, luctus a, commodo in, consectetuer non, lorem. Donec velit. Sed dignissim magna at odio. Vivamus vitae ipsum.</p>
<p>Nulla pede ane, ultrices ut, malesuada in, mattis a, tortor. Etiam convallis arcu ac turpis aliquet egestas. Curabitur egestas, nisi quis aliquam laoreet, diam diam pharetra neque, sollicitudin pretium mauris neque mollis lorem. Sed odio. Donec sagittis justo. Fusce eget sem. Nam semper, eros ac pulvinar mollis, eros nisi venenatis lectus, eget malesuada arcu odio id sem. Mauris ac urna sed metus pulvinar iaculis. Nullam nulla ligula, sollicitudin vel, sodales in, elementum id, enim. Mauris odio enim, volutpat et, ullamcorper a, tempus quis, ante. Nullam est justo, consequat eget, luctus in, vulputate eu, lectus. Nullam quis leo ullamcorper ante consequat tincidunt.</p>
</div>
<div>
</body>

Wat er dus gebeurd in FireFox, is dat als de pagina gelaad wordt het er goed uitziet, maar als ik dan naar beneden scroll, wordt het nieuw-zichtbare stuk geel.. de HTML achtergrond dus...

Ik heb al gekeken naar de Faux-columns, aantal dingen geprobeerd, maar ik krijg de body (paarse stuk) maar niet groter. Ik hoop ook meerdere dingen met 3-column layout geprobeerd, maar bij allen houden ze op na de tekst.. niet aan het einde van de pagina.

Wie weet er een oplossing of heeft een richting waarin ik moet zoeken?

woensdag 4 januari 2006 12:39

Acties:

OkkE

CSS influencer :+

[code]div#container {
...
overflow: auto;
}
[/code]

Misschien? Maar volgens mij heeft dat weer nadelige gevolgen voor IE. Dus zal je het zo moeten doen dan IE het negeerd.

-- edit --
Btw, dat moet denk ik ook bij body. Allemaal niet getest.
^ Dat klopt niet idd. Dat is voor een ander (soortgelijk) probleem.

-- edit2 --
Eigenlijk zou je, volgens mij, min-height:100%; moeten gebruiken voor Firefox, en zorgen dat alleen IE de height:100%; ziet.

Ik zal anders eens een voorbeeldje zoeken...

[ Voor 54% gewijzigd door OkkE op 04-01-2006 12:48 ]

“The best way to get the right answer on the Internet is not to ask a question, it's to post the wrong answer.”
QA Engineer walks into a bar. Orders a beer. Orders 0 beers. Orders 999999999 beers. Orders a lizard. Orders -1 beers.

woensdag 4 januari 2006 12:46

Acties:

Verwijderd

Topicstarter

Hmm... overflow: auto in #container, body en allebij werkt iig niet. Of de hele kolom is scrollbaar (alsin: het lijkt 1 groot iframe) en als ik het alleen in de body stop, komt er bij IE een tweede "major" scrollbar...

Hoe kan ik zorgen dat alleen IE height: 100% ziet?

woensdag 4 januari 2006 12:46

Acties:

OkkE

CSS influencer :+

Deze heb ik ooit eens van internet gehaald.. werkt op WinXP in IE6 en FF

Mocht iemand nog op- of aanmerkingen hebben op deze code, ik hoor 't graag.

code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>CSS Only Footer</title>
    <style type="text/css">      
        html {
            margin: 0; 
            height: 100%; 
            background: white;
        } 
        
        body {
            position: relative; 
            min-height: 100%;  
            width: 580px;
            border-left: 1px solid black;
            border-right: 1px solid black;
            padding: 0 10px;
            margin: 0 auto;
            background: #cccccc;  
        }
        
        #container {
            width: 580px; 
            padding: 10px 0 110px 0;
        }
        
        #footer {
            position: absolute; 
            bottom: 0;
            left: 0;
            border-top: 1px solid black;
            width: 580px;
            padding: 10px;
            height: 79px;
            background: yellow;
        }        
    </style>
    <!--[if lt IE 7]>
        <style type="text/css"> body { height: 100%; } </style>
    <![endif]-->
</head>
<body>
    <div id="container">
      <!-- Main content -->
      content hier dus<br>content hier dus<br>content hier dus<br>content hier dus<br>content hier dus<br>content hier dus<br>content hier dus<br>content hier dus<br>content hier dus<br>content hier dus<br>content hier dus<br>content hier dus<br>content hier dus<br>content hier dus<br>content hier dus<br>content hier dus<br>content hier dus<br>content hier dus<br>content hier dus<br>content hier dus<br>content hier dus<br>content hier dus<br>content hier dus<br>content hier dus<br>content hier dus<br>content hier dus<br>content hier dus<br>content hier dus<br>content hier dus<br>content hier dus<br>content hier dus<br>content hier dus<br>content hier dus<br>content hier dus<br>content hier dus<br>content hier dus<br>content hier dus<br>content hier dus<br>content hier dus<br>content hier dus<br>content hier dus<br>content hier dus<br>content hier dus<br>content hier dus<br>content hier dus<br>content hier dus<br>content hier dus<br>content hier dus<br>content hier dus<br>content hier dus<br>content hier dus<br>content hier dus<br>content hier dus<br>content hier dus<br>content hier dus<br>content hier dus<br>content hier dus<br>content hier dus<br>content hier dus<br>content hier dus<br>content hier dus<br>content hier dus<br>content hier dus<br>content hier dus<br>content hier dus<br>content hier dus<br>content hier dus<br>content hier dus<br>content hier dus<br>content hier dus<br>content hier dus<br>content hier dus<br>content hier dus<br>content hier dus<br>content hier dus<br>content hier dus<br>content hier dus<br>content hier dus<br>content hier dus<br>content hier dus<br>content hier dus<br>content hier dus<br>content hier dus<br>content hier dus<br>content hier dus<br>content hier dus<br>content hier dus<br>content hier dus<br>content hier dus<br>content hier dus<br>content hier dus<br>content hier dus<br>content hier dus<br>content hier dus<br>content hier dus<br>content hier dus<br>content hier dus<br>content hier dus<br>content hier dus<br>content hier dus<br>content hier dus<br>content hier dus<br>content hier dus<br>    
      <!-- /Main content -->
    </div>
    <div id="footer">
        <!-- Footer content -->
        footer hier dus
        <!-- /Footer content -->    
    </div>
</body>
</html>

“The best way to get the right answer on the Internet is not to ask a question, it's to post the wrong answer.”
QA Engineer walks into a bar. Orders a beer. Orders 0 beers. Orders 999999999 beers. Orders a lizard. Orders -1 beers.

woensdag 4 januari 2006 12:52

Acties:

Verwijderd

Topicstarter

Oeh, bedankt! Ziet er goed uit

Ik ga hier even mee spelen, en laat wel horen als het niet meer lukt, maar ik heb zo'n gevoel van wel

woensdag 4 januari 2006 12:56

Acties:

Sappie

De Parasitaire Capaciteit!

OkkE schreef op woensdag 04 januari 2006 @ 12:46:
Deze heb ik ooit eens van internet gehaald.. werkt op WinXP in IE6 en FF
Mocht iemand nog op- of aanmerkingen hebben op deze code, ik hoor 't graag.
code:
1
...

lache.. mijn code die nuttig gebruikt wordt

hier een iets verbeterde versie dr van, let op de expression in de css binnen de conditional comments:

code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>CSS Only Footer</title>
    <style type="text/css">      
        html {
            margin: 0; 
            height: 100%; 
            background: white;
        } 
        
        body {
            position: relative; 
            min-height: 100%; 
            width: 580px;
            border-left: 1px solid black;
            border-right: 1px solid black;
            padding: 0 10px;
            margin: 0 auto;
            background: #eeeeee;  
        }
        
        #container {
            width: 580px; 
            padding: 10px 0 110px 0;
        }
        
        #footer {
            position: absolute; 
            bottom: 0;
            left: 0;
            border-top: 1px dashed black;
            width: 580px;
            padding: 10px;
            height: 79px;
            background: yellow;
        }        
    </style>
    <!--[if lt IE 7]>
        <style type="text/css">
            #footer { bottom: expression((documentElement.clientHeight % 2) ? "-1px" : "0" ); }
            body { height: 100%; }
        </style>
        <![endif]-->
</head>
<body>
    <div id="container">
      <!-- Main content -->
      <h3 style="margin: 0;">Dummy text</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <!-- /Main content -->
    </div>
    <div id="footer">
        <!-- Footer content -->
        <h3 style="margin: 0;">Footer</h3>
        <p>more dummy text here</p>
        <!-- /Footer content -->    
    </div>
</body>
</html>

[ Voor 62% gewijzigd door Sappie op 04-01-2006 12:57 ]

Specs | Audioscrobbler

woensdag 4 januari 2006 13:23

Acties:

OkkE

CSS influencer :+

Sappie schreef op woensdag 04 januari 2006 @ 12:56:
[...]

lache.. mijn code die nuttig gebruikt wordt hier een iets verbeterde versie dr van, let op de expression in de css binnen de conditional comments:
code:
1
            #footer { bottom: expression((documentElement.clientHeight % 2) ? "-1px" : "0" ); }

Dan bij deze mijn dank voor je code!

Maar, die expression, waarom moet die soms 1px verder naar onder gezet? Mij is nooit opgevallen dat dit fout ging..

“The best way to get the right answer on the Internet is not to ask a question, it's to post the wrong answer.”
QA Engineer walks into a bar. Orders a beer. Orders 0 beers. Orders 999999999 beers. Orders a lizard. Orders -1 beers.

woensdag 4 januari 2006 13:24

Acties:

Verwijderd

Dit is ook perfect op te lossen met behulp van faux columns:

http://www.alistapart.com/articles/fauxcolumns/

ik zie dat je al faux columns hebt geprobeerd, dit zou eigenlijk wel moeten werken.

Je maakt een groen vlak, net zo breed als je container, en zet deze volgens in het midden van de pagina met alleen repeat-y. Vrij makkelijk

Cascading Stylesheet:

body
{
background: purple url('url_naar_plaatjes') repeat-y center;
}

[ Voor 65% gewijzigd door Verwijderd op 04-01-2006 13:29 ]

woensdag 4 januari 2006 16:27

Acties:

Sappie

De Parasitaire Capaciteit!

OkkE schreef op woensdag 04 januari 2006 @ 13:23:
Maar, die expression, waarom moet die soms 1px verder naar onder gezet? Mij is nooit opgevallen dat dit fout ging..

Die expression zorgt ervoor dat de footer in IE ook echt altijd helemaal onderaan het scherm zit. Door afrondingsfouten gebeurt dit soms niet.. resize het venster maar eens (zonder de expression te gebruiken) en let dan maar eens goed op de onderkant van de footer.

edit: Wat Paroxysm zegt kan uiteraard ook; had je site nog niet bekeken en je maakt helemaal geen gebruik van een footer, dus is misschien het voorbeeld wat overdreven en zou je het (zonder gebruik te maken van faux columns nog) op deze manier op kunnen lossen:

code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>test</title>
    <style type="text/css">      
        html {
            margin: 0; 
            height: 100%; 
            background: purple;
        } 
        
        body {
            min-height: 100%; 
            width: 600px;
            padding: 0 10px;
            margin: 0 auto;
            background: green;  
        }               
    </style>
    <!--[if lt IE 7]>
        <style type="text/css">
            body { height: 100%; }
        </style>
        <![endif]-->
</head>
<body>
    <h1 style="margin: 0;">test</h1> <!-- margin: 0 ivm margin collapsing -->
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas ornare diam quis est venenatis dictum. Suspendisse est magna, volutpat vel, viverra dignissim, rutrum ac, massa. Maecenas libero risus, ultricies eleifend, rutrum a, vestibulum non, ante. Sed urna. Donec cursus quam eget neque. Nullam aliquet tristique neque. Phasellus tincidunt, leo vitae vulputate volutpat, ligula risus sagittis justo, id pulvinar turpis neque at tortor. Sed id lacus. Donec tellus libero, imperdiet nec, cursus at, sagittis vitae, mi. Integer ac enim ac odio pellentesque volutpat. Sed sapien lorem, convallis nec, tempor vel, laoreet eu, nulla. Curabitur consequat, tellus eget ornare tempus, justo nisl pharetra ante, vitae euismod odio augue in mauris. Curabitur a mauris ut velit dapibus consectetuer. Nullam enim eros, lacinia at, feugiat nec, porta eu, nulla. Nam aliquet. Pellentesque venenatis nunc nec dolor. Morbi ac tellus.</p>
</body>
</html>

[ Voor 79% gewijzigd door Sappie op 04-01-2006 16:33 ]

Specs | Audioscrobbler

woensdag 4 januari 2006 17:06

Acties:

Verwijderd

Topicstarter

$_/-\o_$ @ Sappie!

Ik snap nog niet wat ik precies fout heb gedaan, want het werkt ook zonder die expression en ik dacht dat ik al zoiets eerder had, maar het werkt prima

Bedankt

woensdag 4 januari 2006 17:26

Acties:

Sappie

De Parasitaire Capaciteit!

Die expression is er ook voor om de footer ook altijd exact op zijn plaats te krijgen in IE, en aangezien je geen gebruik maakt van de footer..

Specs | Audioscrobbler

donderdag 5 januari 2006 14:20

Acties:

Verwijderd

Topicstarter

don't want to be a pain in the ass... maar die expression werkt niet goed (meer)

Ik gebruik nu wel een footer, met de volgende css

code:

<style type="text/css">      
        html {
            margin: 0; 
            height: 100%; 
            background: white;
        } 
        
        body {
            font-family: verdana;
            font-size: 11px;
            position: relative; 
            min-height: 100%; 
            width: 580px;
            border-left: 1px solid black;
            border-right: 1px solid black;
            margin: 0 auto;
            background: #eeeeee;  
        }
        
        #container {
            width: 580px; 
            padding: 0px 0 25px 0;
            background-color: orange;
        }
        
        div#footer {
            font-size: 10px;
            position: absolute; 
            bottom: 0;
            left: 0;
            border-top: 1px dashed black;
            width: 580px;
            padding: 5px 0px 0px 0px;
            height: 15px;
            background: yellow;
            text-align: center;
        }        
    </style>
    <!--[if lt IE 7]>
        <style type="text/css">
            div#footer { bottom: expression((documentElement.clientHeight % 2) ? "-1px" : "0" ); }
            body { height: 100%; }
        </style>
        <![endif]-->

Wat ik veranderd/toegevoegd heb zijn de paddings van de footer, body en container. Maar daardoor zou die expression toch nog gewoon moeten werken? Jouw orginele code doet het wel goed... misschien een idee hoe ik het alsnog kan laten werken?

donderdag 5 januari 2006 14:49

Acties:

Sappie

De Parasitaire Capaciteit!

Ik zie niet dat er iets fout gaat.. wat werkt er bij jou niet goed?

ps als je offline test (zonder gebruik van een webserver en dus op je eigen pc) en je maakt gebruik van Windows XP SP2 dan gooit IE de beveiliging erop als je gebruik maakt van oa javascript (zie die gele balk tussen de adresbalk en de pagina zelf). Deze dien je uiteraard ff uit te zetten he

Specs | Audioscrobbler

donderdag 5 januari 2006 14:59

Acties:

Verwijderd

Topicstarter

Van die JS warning had ik idd ook door, en ik test het daarom ook via m'n webserver

Maar ik krijg als ik het venster van IE6 (XP-SP2) resize, bij sommige afmetingen een, in dit geval oranje, streep van 1 pixel onder de footer. Als ik het venster telkens 1 pixel vergroot, gebeurd het om en om... dus de afronding gaat nog steeds niet goed...

donderdag 5 januari 2006 15:04

Acties:

Sappie

De Parasitaire Capaciteit!

Vaag.. ik heb net je css in mijn voorbeeld gekopieerd en heb er geen last van. Enne.. hoezo is die pixel oranje? Je hebt toch slechts de achtergrond van de container oranje gemaakt.. en die is maar 25 pixels hoog (+inhoud) en komt daardoor niet bij de footer in de buurt.

Gebruik je exact dezelfde markup (HTML) als in mijn voorbeeld?

edit: hier de code waarmee ik getest heb:

code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>test</title>
    <style type="text/css">      
        html {
            margin: 0; 
            height: 100%; 
            background: white;
        } 
        
        body {
            font-family: verdana;
            font-size: 11px;
            position: relative; 
            min-height: 100%; 
            width: 580px;
            border-left: 1px solid black;
            border-right: 1px solid black;
            margin: 0 auto;
            background: #eeeeee;  
        }
        
        #container {
            width: 580px; 
            padding: 0px 0 25px 0;
            background-color: orange;
        }
        
        div#footer {
            font-size: 10px;
            position: absolute; 
            bottom: 0;
            left: 0;
            border-top: 1px dashed black;
            width: 580px;
            padding: 5px 0px 0px 0px;
            height: 15px;
            background: yellow;
            text-align: center;
        }        
  </style>
  <!--[if lt IE 7]>
      <style type="text/css">
          div#footer { bottom: expression((documentElement.clientHeight % 2) ? "-1px" : "0" ); }
          body { height: 100%; }
      </style>
    <![endif]-->
</head>
<body>
    <div id="container">dsadsa</div>
    <div id="footer">dsadsa</div>
</body>
</html>

[ Voor 71% gewijzigd door Sappie op 05-01-2006 15:04 ]

Specs | Audioscrobbler

donderdag 5 januari 2006 15:15

Acties:

Verwijderd

Topicstarter

HTML is hetzelfde... bij mij krijg ik het alleen als ik de inhoud van "container" langer maak dan 1 pagina...

donderdag 5 januari 2006 15:24

Acties:

Sappie

De Parasitaire Capaciteit!

stomme fout die mij nog niet eerder is opgevallen.. maar je hebt gelijk

Verander de expression eens in dit:

code:

1	div#footer { bottom: expression((document.body.clientHeight % 2) ? "-1px" : "0" ); }

Dit heeft op een of andere manier wel tot gevolg dat de scrollbalk af en toe knippert (wanneer de content kleiner is dan het browservenster), maar dit is niet erg irritant.

edit:
mag ook document.body.offsetHeight zijn.. lijkt geen verschil te maken.

[ Voor 128% gewijzigd door Sappie op 05-01-2006 15:54 ]

Specs | Audioscrobbler

vrijdag 6 januari 2006 11:44

Acties:

Verwijderd

Topicstarter

Jups, werkt nu wel goed, bedankt

Van knipperende scrollbalken heb ik nog (geen) last... niet dat ik dat erg vind