[CSS] Onderste lijn onder bottom

[rutgerprins]

Hallo,

Een tijdje geleden was ik begonnen aan een website voor mezelf. Deze site is hier te zien http://www.svblokzijl.nl/test/. Nu blijkt dat er voor 1024x768 users en lager, dat er onderaan een 1px hoge lijn is te zien. Mensen met 1280x1024, waaronder ikzelf, zien deze lijn niet. Ik zit er nu al een maandje af en toe mee te klojen, maar ik kan hem niet goed krijgen.

In de CSS heb ik al een aantal dingen geprobeerd met de positionering. Margin in de min zetten helpt niet, de position moet absolute hebben, anders verplaatst hij hem helemaal. Ik kan er maar niet achter komen... dus vandaar mijn vraag hier:

Weet iemand hoe ik die witte lijn onderaan de pagina weg krijgt?

Het is trouwens een lijn van een plaatje die over de Y-as gerepeat wordt.. in de container.

HF

[Scheeve]

heb je de site al in firefox bekeken ?? Is denk ik iets erger dan een 1 px lijn

[rutgerprins]

sorry foutje, ik had een niet geupdate versie gepakt.. nu is hij wel goed

[Michali]

Het probleem is dat je footer niet altijd helemaal tegen de onderkant aanzit. In Firefox gaat dit wel goed overigens. Je zou dit kunnen oplossen door hem niet 0 maar -1px vanaf de onderkant te plaatsen.

[rutgerprins]

Michali schreef op woensdag 05 april 2006 @ 22:16:
Het probleem is dat je footer niet altijd helemaal tegen de onderkant aanzit. In Firefox gaat dit wel goed overigens. Je zou dit kunnen oplossen door hem niet 0 maar -1px vanaf de onderkant te plaatsen.

zoals ik in de TS al aangaf, margin in de min zetten werkt niet

[Michali]

Ik heb het niet over de margin. Ik heb het over de bottom waarde. Zet die eens op -1px.

[rutgerprins]

Michali schreef op donderdag 06 april 2006 @ 10:17:
Ik heb het niet over de margin. Ik heb het over de bottom waarde. Zet die eens op -1px.

je hebt gelijk, het is nu opgelost.. bedankt!!

[Justice]

Opera 9 maakt er een beetje een zooitje van, het plaatje "me" valt nu onder je footer. Meestal duidt dit aan dat er toch nog iets niet helemaal goed zit met je css.

[Verwijderd]

Ik dacht dat Opera 9 nog gewoon in de maak was?

[Rekcor]

Nog iets (maar misschien is dat juist de bedoeling) als ik in IE het browservenster kleiner maak, schuift het plaatje 'HOME' onder de footer door.

[rutgerprins]

Rekcor schreef op donderdag 06 april 2006 @ 16:07:
Nog iets (maar misschien is dat juist de bedoeling) als ik in IE het browservenster kleiner maak, schuift het plaatje 'HOME' onder de footer door.

hmm in mn IE6 is dat niet zo, welke IE heb je?

Ik heb idd alleen getest met FireFox en IE maar Opera maakt er een zooitje van dus?

[ Voor 15% gewijzigd door rutgerprins op 06-04-2006 16:38 ]

[Michali]

In mijn IE ook, dat gebeurt als je het venster klein maakt totdat er een scrollbar verschijnt, dan scrollen tot helemaal onderaan, en dan het venster weer resizen. Daar is weinig aan te doen denk ik.

[Justice]

Datzelfde heb je dus in Opera, maar dan standaard (ik kon HO uit HOME niet zien).
Opera maakt er dus geen zooitje van, maar blijkbaar klopt je code niet helemaal met hoe je het wil laten weergeven

[rutgerprins]

Michali schreef op donderdag 06 april 2006 @ 17:15:
In mijn IE ook, dat gebeurt als je het venster klein maakt totdat er een scrollbar verschijnt, dan scrollen tot helemaal onderaan, en dan het venster weer resizen. Daar is weinig aan te doen denk ik.

in mijn IE is dat niet hoor

[Michali]

Ook niet als je hem erg klein schaalt (100-200px) en dan helemaal naar onder scrollt?

[rutgerprins]

Het is nu wel gefixt in 1024x768, maar als je nu kijkt in 1280x1024 zie je ineens een scrollbalk

komt dus door die ene -1 pixel

misschien iemand een andere oplossing?

[DamadmOO]

Cascading Stylesheet:

body {
  overflow: hidden;
}

[Michali]

Dat zou ik dus niet doen, dan heb je nooit meer een scrollbar, en dat lijkt me niet helemaal de bedoeling.

[DamadmOO]

Het ligt er allemaal aan wat de TS wil. Die standaard scrollbar zal hij altijd zien zolang hij de footer op bottom: -1px; positioneerd. Het probleem is dat de TS niet precies duidelijk is wat betreft zijn design. Hoe wil hij dat de pagina eruit ziet wanneer de content groter wordt dan de plaats die daarvoor is.

Wil hij dan dat de gehele pagina uitrekt? zo ja dan mag je geen body { overflow: hidden; } gebruiken. Maar als de TS dan gewoon een scrollbar wil in het content gedeelte dan moet je juist weer wel de overflow: hidden; gebruiken.

[Sappie]

Je kunt het op lossen door middel van een IE only expression voor de bottom property van je footer. Deze kun je dan bijvoorbeeld weer in een conditional comment zetten.

zoiets als het volgende waar ik wel eens gebruik van maak:

Cascading Stylesheet:

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

Voor firefox geef je dan uiteraard gewoon een bottom van 0 op.

[ Voor 6% gewijzigd door Sappie op 19-04-2006 16:21 ]

[rutgerprins]

Sappie schreef op woensdag 19 april 2006 @ 16:21:
Je kunt het op lossen door middel van een IE only expression voor de bottom property van je footer. Deze kun je dan bijvoorbeeld weer in een conditional comment zetten.

zoiets als het volgende waar ik wel eens gebruik van maak:

Cascading Stylesheet:

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

Voor firefox geef je dan uiteraard gewoon een bottom van 0 op.

In FF is hij nu goed, in IE echter nog niet... ik heb de volgende code gebruikt

PHP:

#footer {
    position: absolute;
    width: 547px;
    height: 95px;
    background-image: url(images/footer.jpg);
    background-repeat:no-repeat;
    margin: 0 0 0px 0px;
    margin: 0;
    left: 0;
    right: 0;
    bottom: 0px;
    bottom: expression((document.body.clientHeight % 2) ? "-1px" : "0" ); 
}

[Verwijderd]

Waarom staat het tussen PHP tags?

[rutgerprins]

Verwijderd schreef op woensdag 19 april 2006 @ 19:22:
Waarom staat het tussen PHP tags?

omdat ik niet weet hoe ik css code doe.. stond niet tussen de ubb codes lijst

[css] test [/css]

^^ werkt ook niet, care?

[ Voor 6% gewijzigd door rutgerprins op 19-04-2006 20:03 ]

[DamadmOO]

rutgerprins schreef op woensdag 19 april 2006 @ 20:03:
[...]


omdat ik niet weet hoe ik css code doe.. stond niet tussen de ubb codes lijst

[css] test [/css]

^^ werkt ook niet, care?

[code = css]

[code=...] herkent "c, c++, css, perl, python, php, asp, vb, java, js, fortran, cobol, pascal, delphi, html, xml, sql", hier komen later zo mogelijk highlighters voor.

[ Voor 24% gewijzigd door DamadmOO op 19-04-2006 20:05 ]

[Verwijderd]

Ik had het over de '<?' en '?>' tekens om je CSS heen, niet zozeer dat hij in een PHP-hightlight vakje staat.

[Zoefff]

Verwijderd schreef op woensdag 19 april 2006 @ 20:05:
Ik had het over de '<?' en '?>' tekens om je CSS heen, niet zozeer dat hij in een PHP-hightlight vakje staat.

Die tekens worden automatisch om je code heengezet als je aangeeft dat het PHP is (wat de TS dus heeft gedaan door z'n CSS tussen PHP-codetags te zetten).

[Sappie]

rutgerprins schreef op woensdag 19 april 2006 @ 19:18:
[...]


In FF is hij nu goed, in IE echter nog niet... ik heb de volgende code gebruikt

PHP:

#footer {
    position: absolute;
    width: 547px;
    height: 95px;
    background-image: url(images/footer.jpg);
    background-repeat:no-repeat;
    margin: 0 0 0px 0px;
    margin: 0;
    left: 0;
    right: 0;
    bottom: 0px;
    bottom: expression((document.body.clientHeight % 2) ? "-1px" : "0" ); 
}

Je positioneert je container absoluut, terwijl dat niet nodig is. Dit alleen al zorgt voor wat problemen omdat absoluut gepositioneerde elementen uit de flow worden gehaald (dat is in IE op dit moment ook goed te zien wanneer je het venster klein genoeg maakt). Beter positioneer je die dus gewoon relative (om het absoluut positioneren van de bottom eenvoudig te maken). Het horizontaal centreren (ik denk dat je daarom absoluut positioneert) is ook te bewerkstelligen door middel van het toepassen van margin: 0 auto.

edit:
Verder zie ik dat je veel gebruik maakt van absoluut positioneren waar dit niet nodig is. Liever vermijdt je dat zoveel mogelijk. Ook relatief positioneren van een element is niet altijd nodig als je toch geen gebruik maakt van een offset (top, left..); het is namelijk verder alleen nuttig wanneer je iets absoluut wilt positioneren tov dat element.

[ Voor 21% gewijzigd door Sappie op 19-04-2006 20:17 ]

[rutgerprins]

ja dat doe hij automatisch... heb ik er zelf niet omheen gezet..

even ontopic weer plz

[rutgerprins]

volgens mij moet hij nu goed wezen in 1024 en ook in 1280...

klopt he?

bedankt voor alle adviezen!

[ Voor 28% gewijzigd door rutgerprins op 19-04-2006 21:50 ]

[JHS]

Hoe heb je het nu uiteindelijk opgelost ?

[rutgerprins]

ohja sorry, dat zal ik nog even vermelden..

Cascading Stylesheet:

 bottom: 0px; 
    bottom: expression((document.body.clientHeight % 2) ? "-1px" : "0" );   

Die heb ik toegevoegd in de footer... de 1e keer werkte dat niet, maar nu ineens wel.

[ Voor 21% gewijzigd door rutgerprins op 20-04-2006 11:50 ]