[CSS] Lange kolom duwt in FF footer niet naar beneden - Softwareontwikkeling

dinsdag 27 december 2005 19:13

Acties:

Hopla!

Topicstarter

Voor mijn website heb ik tot nu toe de volgende html / css:

Cascading Stylesheet:

/*----------------------------------------------------------------------
 * Algemeen
 *---------------------------------------------------------------------*/

body {
  margin           : 10px 0 20px 0;
  background       : #fff url(../newfiles/bg.gif) repeat-x fixed;
  text-align       : center; /* Centreren in IE */
  font-family      : Arial;
  font-size        : 12px;
  overflow         : -moz-scrollbars-vertical;
}

#wrap {
  width            : 760px;
  margin           : 0 auto; /* Centreren in FF */
}

#header {
  height           : 101px;
  background       : url(../newfiles/header.gif);
}

#body {
  background       : #fff;
  min-height       : 350px; /* FF body stretch if content < 350px */
  _height          : 350px; /* IE underscore hack for body stretching */
  padding          : 0 10px 20px 10px;
}

#text {
  float            : left;
  height           : 200px;
  width            : 400px;
  background       : red;
}

#side {
  float            : right;
  height           : 400px;
  width            : 160px;
  background       : red;
}

#footer {
  height           : 43px;
  background       : url(../newfiles/footer.gif);
}

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <link rel="stylesheet" type="text/css" href="newfiles/style.css" media="screen, projection">
</head>
<body>
<div id="wrap">
  <div id="adminnav"></div>
  <div id="header"></div>
  <div id="body">
    <div id="text"></div>
    <div id="side"></div>
  </div>
  <div id="footer"></div>
</div>
</body>
</html>

Het probleem zit hem in #text en #side. Als de height van deze twee div's op 200px staat, krijg ik hetzelfde resultaat in IE en FF:

Afbeeldingslocatie: http://www.danandan.luna.nl/got/newBoth.gif

Afbeeldingslocatie: http://www.danandan.luna.nl/got/newBoth.gif

Als ik de lengte van een van de twee, in dit geval #side, oprek naar bijvoorbeeld 400px, ziet het resultaat in IE eruit zoals verwacht, namelijk: omdat #side langer wordt, wordt #body langer dan 350px (=minimale hoogte van de pagina) en wordt de #footer naar beneden gedrukt:

Afbeeldingslocatie: http://www.danandan.luna.nl/got/newIE.gif

Afbeeldingslocatie: http://www.danandan.luna.nl/got/newIE.gif

In FF gebeurt dit echter niet: #side valt nu gewoon over #footer heen:

Afbeeldingslocatie: http://www.danandan.luna.nl/got/newFF.gif

Mijn vraag is: waarom gebeurt dit? Ik dacht eerst dat ik dit probleem eens voorbij had zien komen in een eerdere GoT post, maar dit bleek niet het geval. Het ging daar om het probleem van de faux columns van A List Apart. Wie kan mij verder helpen?

"Real software engineers work from 9 to 5, because that is the way the job is described in the formal spec. Working late would feel like using an undocumented external procedure."

dinsdag 27 december 2005 19:19

Acties:

Verwijderd

Als je een bepaalde achtergrondkleur wilt hebben voor je kolommen kun je het best die faux columns gebruiken. Wil je je footer helemaal onderaan elke pagina, geef die #footer dan de property clear: both; en/of geef de #body height: auto;, of laat gewoon niet allebei de elementen in #body floaten. Dat is vaak ook nergens voor nodig, zéker niet als je faux columns gebruikt.

dinsdag 27 december 2005 19:32

Acties:

Reveller

Hopla!

Topicstarter

@Cheatah - nou, het is dus niet zo dat ik de #text en #side kolommen een bepaalde achtergrondkleur wil geven; uiteindelijk wordt de hele #body wit. Voor mij hoeven de kolommen dus ook niet altijd even lang te zijn / faux columns. De situatie zal altijd zijn dat OF #text OF #side langer is dan de andere, en ik wil dat die langste kolom de #body uitrekt en de footer naar beneden duwt.

Door #footer de property clear: both te geven, wordt de footer naar beneden gedrukt, maar #side breekt uit de #body div, in plaats van deze te stretchen. Enig idee hoe dit komt? En omdat een plaatje meer zegt dan 1000 woorden (ik heb #body de property background: lime meegegeven ter verduidelijking):

IE (goed):

Afbeeldingslocatie: http://www.danandan.luna.nl/got/newIE2.gif

Afbeeldingslocatie: http://www.danandan.luna.nl/got/newIE2.gif

FF (fout):
Afbeeldingslocatie: http://www.danandan.luna.nl/got/newFF2.gif

[ Voor 42% gewijzigd door Reveller op 27-12-2005 19:48 ]

"Real software engineers work from 9 to 5, because that is the way the job is described in the formal spec. Working late would feel like using an undocumented external procedure."

dinsdag 27 december 2005 20:28

Acties:

Sappie

De Parasitaire Capaciteit!

pas een overflow: auto toe op je div met id body. Hierdoor clear je de floats ook.

meer hierover bijvoorbeeld hier: http://annevankesteren.nl/2005/03/clearing-floats

[ Voor 6% gewijzigd door Sappie op 27-12-2005 20:29 ]

Specs | Audioscrobbler

dinsdag 27 december 2005 21:00

Acties:

Reveller

Hopla!

Topicstarter

@Sappie - voor FF werkt dat goed, maar in IE krijg ik nu een scrollbalk.

FF:
Afbeeldingslocatie: http://www.danandan.luna.nl/got/newGoedFF.gif

IE:

Afbeeldingslocatie: http://www.danandan.luna.nl/got/newFoutIE.gif

Door die scrollbalk klopt overigens ook de rechtermarge bij IE niet. De vraag is: bij overflow: auto geeft IE bij mij een scrollbalk, terwijl dat ik het voorbeeld van http://annevankesteren.nl/2005/03/clearing-floats niet gebeurt. Waar zit dan de fout in mijn css?

Na wat debuggen kwam ik erachter dat regel xx een en ander in de war schopt. Die regel weghalen is echter geen oplossing, want zorgt voor een hoop nieuwe problemen. Ik heb nu eenmaal een minimale #body height van 350px nodig. De css op dit moment:

Cascading Stylesheet:

body {
  margin           : 10px 0 20px 0;
  background       : #fff url(../newfiles/bg.gif) repeat-x fixed;
  text-align       : center; /* Centreren in IE */
  font-family      : Arial;
  font-size        : 12px;
  overflow         : -moz-scrollbars-vertical;
}

#wrap {
  width            : 760px;
  margin           : 0 auto; /* Centreren in FF */
}

#header {
  height           : 101px;
  background       : url(../newfiles/header.gif);
}

#body {
  background       : #fff;
  min-height       : 350px; /* FF body stretch if content < 350px */
  _height          : 350px; /* IE underscore hack for body stretching */
  padding          : 0 20px 20px 20px;
  overflow         : auto; /* http://annevankesteren.nl/2005/03/clearing-floats */
}

#text {
  float            : left;
  height           : 200px;
  width            : 530px;
  background       : red;
}

#side {
  float            : right;
  height           : 400px;
  width            : 170px;
  background       : red;
}

#footer {
  clear            : both;
  height           : 43px;
  background       : url(../newfiles/footer.gif);
}

[ Voor 105% gewijzigd door Reveller op 27-12-2005 22:37 ]

"Real software engineers work from 9 to 5, because that is the way the job is described in the formal spec. Working late would feel like using an undocumented external procedure."

woensdag 28 december 2005 00:20

Acties:

crisp

Devver

Pixelated

Als je dan toch met ranzige hacks bezig bent:

Cascading Stylesheet:

1	_overflow: visible;

(en dan maar hopen dat dat straks in IE7 nog goed gaat...)

Probleem is natuurlijk dat in IE de combo height en overflow voor onverwachte effecten zorgt omdat height dan niet meer als min-height werkt. Persoonlijk zou ik een oplossing waarbij je min-height correct implementeerd voor IE (bijvoorbeeld mbv een expression/behavior) dan ook netter.

[ Voor 50% gewijzigd door crisp op 28-12-2005 09:53 ]

Intentionally left blank

woensdag 28 december 2005 13:41

Acties:

Reveller

Hopla!

Topicstarter

crisp schreef op woensdag 28 december 2005 @ 00:20:
Probleem is natuurlijk dat in IE de combo height en overflow voor onverwachte effecten zorgt omdat height dan niet meer als min-height werkt.

Ik wist dat het probleem daar zat, maar wist het niet zo te omschrijven

Persoonlijk zou ik een oplossing waarbij je min-height correct implementeerd voor IE (bijvoorbeeld mbv een expression/behavior) dan ook netter.

Ik heb geen idee wat je hier zegt. Na lang zoeken over hoe je een min-height voor IE kon faken, ben ik op genoemde hack uitgekomen. Wat bedoel je met een expression/behavior?

[edit]

Na wat googlen heb ik gevonden wat css expressions zijn. Bedoelde je iets als:

code:

<!--[if IE]>
   <style type="text/css" media="screen">
      #body { height: 350px; overflow: visible }
   </style>
<![endif]-->

of iets als

code:

<!--[if IE]>
   <style type="text/css" media="screen">
      #body { height: expression((body.clientHeight < 350) ? "350px" : "auto" ); }
   </style>
<![endif]-->

Op http://www.snook.ca/archives/000157.php vond ik de volgende oplossing:

code:

1	height: expression('350px'); min-height: 350px;

Wat is de meest correcte aanpak? Als ik dan toch deze vakantie een nieuwe layout maak, dan het lieft ook maar meteen helemaal css correct

[ Voor 59% gewijzigd door Reveller op 28-12-2005 13:50 ]

"Real software engineers work from 9 to 5, because that is the way the job is described in the formal spec. Working late would feel like using an undocumented external procedure."

woensdag 28 december 2005 14:12

Acties:

crisp

Devver

Pixelated

Meer iets als:

HTML:

<!--[if lte IE 6]>
<style type="text/css">
#body {
  height: expression(this.clientHeight < 350? '350px' : 'auto' );
}
</style>
<![endif]-->

of kijk eens naar Dean's IE7 waarmee nog veel meer CSS2 properties beschikbaar zijn voor IE

Intentionally left blank

woensdag 28 december 2005 14:27

Acties:

Reveller

Hopla!

Topicstarter

@crisp - Dank je voor je voorbeeld en verwijzing. Mijn IE crashed alleen volledig op deze code?!

"Real software engineers work from 9 to 5, because that is the way the job is described in the formal spec. Working late would feel like using an undocumented external procedure."

woensdag 28 december 2005 14:37

Acties:

crisp

Devver

Pixelated

Ik had het ook niet getest

Blijkbaar vind IE het niet fijn als je de clientHeight property opvraagt in deze constructie - met scrollHeight werkt het al een stuk beter

Intentionally left blank

woensdag 28 december 2005 14:55

Acties:

DeFeCt

je wéét toch

even iets heel anders.. is het gebruik van #body niet een beetje tricky? ..als in body is al een bestaande property. Just wondering

Flickr

woensdag 28 december 2005 15:04

Acties:

crisp

Devver

Pixelated

DeFeCt schreef op woensdag 28 december 2005 @ 14:55:
even iets heel anders.. is het gebruik van #body niet een beetje tricky? ..als in body is al een bestaande property. Just wondering

Dat zou in IE door de backwards-compatibility met het antieke document.all model inderdaad in bepaalde gevallen voor problemen kunnen zorgen ja

Intentionally left blank

donderdag 29 december 2005 01:28

Acties:

Verwijderd

Als je onder <div id="side"></div> nog een <div id="xxxx"></div> plaatst nog binnen de div die je body noemt, kun je deze clear: both geven en zorgt hij er voor dat hij in de drie browsers goed werkt.
Als je dat doet bij de footer zal hij de body niet uitrekken namelijk.

Je kunt trouwens ook last hebben van verschillende margins en paddings etc, deze haal je weg door elke css stylesheet die je maakt te beginnen met * {margin: 0; padding: 0; border: 0;}

Voorbeeldje: http://www.beerput.com/tst/test.html

[ Voor 63% gewijzigd door Verwijderd op 29-12-2005 01:37 ]

donderdag 29 december 2005 02:33

Acties:

Boelie-Boelie

Misschien heb je wat aan dit artikel:
www.themaninblue.com/writing/perspective/2005/08/29/

Niet met een minimale hoogte van 350px, maar wel maximaal gebruik van de hoogte viewport (die in de praktijk groter is dan 350px). Footer blijft aan de onderkant van het scherm als er weinig tekst is; de footer schuift buiten de viewport zodra één van de kolommen lang wordt.

Cogito ergo dubito

donderdag 29 december 2005 10:32

Acties:

crisp

Devver

Pixelated

Verwijderd schreef op donderdag 29 december 2005 @ 01:28:
Als je onder
nog een
plaatst nog binnen de div die je body noemt, kun je deze clear: both geven en zorgt hij er voor dat hij in de drie browsers goed werkt.
Als je dat doet bij de footer zal hij de body niet uitrekken namelijk.

Extra markup toevoegen om dit probleem op te lossen vind ik persoonlijk niet de mooiste oplossing als het ook anders kan

Intentionally left blank

donderdag 29 december 2005 11:56

Acties:

Verwijderd

crisp schreef op woensdag 28 december 2005 @ 14:12:
Meer iets als:

HTML:

<!--[if lte IE 6]>
<style type="text/css">
#body {
  height: expression(this.scrollHeight < 350? '350px' : 'auto' );
}
</style>
<![endif]-->

Ik heb een soortgelijk probleem als de TS en ik heb deze expression toegepast om het probleem te verhelpen. In IE werkt dit prima, maar FireFox lijkt deze expressie te negeren.

[ Voor 9% gewijzigd door Verwijderd op 29-12-2005 11:58 ]

donderdag 29 december 2005 12:29

Acties:

Sappie

De Parasitaire Capaciteit!

expressions zijn ook IE only

(bovendien is ook nog gebruik gemaakt van IE only conditional comments)

In Firefox is dit prima op te lossen door middel van de min-height property.

[ Voor 25% gewijzigd door Sappie op 29-12-2005 12:30 ]

Specs | Audioscrobbler

donderdag 29 december 2005 12:44

Acties:

Verwijderd

Ik weet dat het op te lossen is met min-height, maar had toch gehoopt op een oplossing waarbij één condition voor beide browsers zou functioneren.

donderdag 29 december 2005 12:56

Acties:

crisp

Devver

Pixelated

Verwijderd schreef op donderdag 29 december 2005 @ 12:44:
Ik weet dat het op te lossen is met min-height, maar had toch gehoopt op een oplossing waarbij één condition voor beide browsers zou functioneren.

Zolang IE CSS2(.1) nog niet volledig ondersteund is daar gewoon geen simpele oplossing voor. IE7 gaat daar wellicht verandering in brengen, maar de ervaring leert dat mensen maar langzaam upgraden - plus het feit dat IE7 enkel vanaf windows XP beschikbaar zal komen - dus de eerstkomende 5 jaar zal je toch nog rekening moeten houden met antieke IE versies...

Intentionally left blank

donderdag 29 december 2005 21:42

Acties:

Verwijderd

crisp schreef op donderdag 29 december 2005 @ 10:32:
[...]

Extra markup toevoegen om dit probleem op te lossen vind ik persoonlijk niet de mooiste oplossing als het ook anders kan

Gelijk heb je, het gebeurde echter al waardoor ik dus de goede oplossing voor die manier aangaf.
Daarom heb ik nu ook een betere manier die ik gister ff niet bij de hand had.

http://www.mezzoblue.com/archives/2004/09/16/minheight_fi/

Op deze manier kun je het oplossen dmv wat te veranderen in de css, zonder extra layers ofzo.
Trouwens wel aparte methode, zo met een negatieve padding etc..

donderdag 29 december 2005 22:02

Acties:

crisp

Devver

Pixelated

Verwijderd schreef op donderdag 29 december 2005 @ 21:42:
[...]
Op deze manier kun je het oplossen dmv wat te veranderen in de css, zonder extra layers ofzo.
Trouwens wel aparte methode, zo met een negatieve padding etc..

Ziet er nog erg hackish uit (en * html is ook een hack) eerlijk gezegd, en dat allemaal omdat er 1 browser is die nogal achterloopt met CSS implementaties (vziw ondersteund Safari tegenwoordig prima min-height)

Intentionally left blank

donderdag 29 december 2005 22:12

Acties:

Verwijderd

crisp schreef op donderdag 29 december 2005 @ 22:02:
[...]

Ziet er nog erg hackish uit (en * html is ook een hack) eerlijk gezegd, en dat allemaal omdat er 1 browser is die nogal achterloopt met CSS implementaties (vziw ondersteund Safari tegenwoordig prima min-height)

Het is niet anders, we kunnen alleen hopen dat Microsoft hier serieus wat aan gaat doen. Het is immers een belangrijk onderdeel van het www he?

Het maakt mij trouwens niet uit om hacks te gebruiken, zolang de css er niet te onoverzichtelijk door wordt. En een extra layer is ook niet erg, daarvoor zijn ze toch gemaakt?

donderdag 29 december 2005 22:53

Acties:

crisp

Devver

Pixelated

Wat versta jij onder een 'layer' ?

Hacks zijn gevaarlijk in die zin dat je nooit zeker weet of het wel forwards-compatible is, en of het misschien neven-effecten heeft in andere browsers waarin je wellicht niet test...

Intentionally left blank

donderdag 29 december 2005 22:56

Acties:

Verwijderd

crisp schreef op donderdag 29 december 2005 @ 22:53:
Wat versta jij onder een 'layer' ?

Hacks zijn gevaarlijk in die zin dat je nooit zeker weet of het wel forwards-compatible is, en of het misschien neven-effecten heeft in andere browsers waarin je wellicht niet test...

Ik bedoel er div mee, las net dat jij dat er een betere term voor vindt.

En is het dan niet onmogelijk om een site te maken die met elke browser goed werkt?

donderdag 29 december 2005 22:58

Acties:

Verwijderd

Daarom is de conditional comments hack nog de meest ideale om eventuele verschillen tussen IE en andere browsers te tackelen. En dat zit hem in het feit dat je met versienummers aan de gang kunt. Zo kun je IE 6.0 bijvoorbeeld standards compliant (nouja, bijna dan) laten renderen, terwijl IE 5.x dat niet kan (verschillen in boxmodel). En dan kun je best voor IE < 6.0 zo'n hack gebruiken, omdat je precies weet wat je vastlegt.

donderdag 29 december 2005 23:00

Acties:

Verwijderd

Verwijderd schreef op donderdag 29 december 2005 @ 22:56:

Ik bedoel er div mee, las net dat jij dat er een betere term voor vindt.

En is het dan niet onmogelijk om een site te maken die met elke browser goed werkt?

Een div is geen layer, een div is gewoon een block-level element. Met een layer wordt vaak een element bedoeld die "anders" wordt gepositioneerd, bijvoorbeeld floatend, absoluut of relatief gepositioneerd. Verder is het een beetje een loze term geworden sinds Netscape 4.x niet meer serieus genomen wordt.

vrijdag 30 december 2005 16:55

Acties:

Reveller

Hopla!

Topicstarter

Bedankt iedereen voor de reakties tot nu toe. Ik ben nu zover dat de site goed werkt in zowel FF als IE. De CSS validator geeft alleen wat errors mbt background colors die ik niet gegeven zou hebben. (Ik moet nog uitzoeken waar die errors vandaan komen, want ik heb bij mijn backgrounds wel kleuren ingevuld).

Zojuist opende ik de pagina in Opera, en dat ziet er niet uit:

Afbeeldingslocatie: http://www.danandan.luna.nl/got/opera.gif

Afbeeldingslocatie: http://www.danandan.luna.nl/got/opera.gif

Ik ben wat aan het prutsen geweest, en kwam er achter dat de footer naar beneden gedrukt wordt door aan de css #footer {clear: both; } toe te voegen:

Afbeeldingslocatie: http://www.danandan.luna.nl/got/opera2.gif

Afbeeldingslocatie: http://www.danandan.luna.nl/got/opera2.gif

Alleen, zoals je ziet worden de tekst en de sidebar gewoon afgebroken. Het tweede probleem is natuurlijk dat de topnavigatie niet in de #main div, maar absoluut gepositioneerd lijkt te zijn. Ik weet niet wat ik verkeerd doe, want nogmaals: voor zover ik er verstand van heb, is alleen conform css standaarden (behalve de -moz-scrollbars-vertical natuurlijk)

Wie kan mij wel vertellen waar of waarom het fout gaat? Ik wil graag dat mijn nieuwe site er in alle browsers gelijk uit ziet (en ook nog goed te lezen is zonder css).

Omdat het geen zin heeft hier lange css en html te posten, heb ik de pagina online gezet. De css staat hier. Er is niets veranderd aan de div's uit de beginpost. Er staat alleen wat Lorem Ipsum tussen

[ Voor 12% gewijzigd door Reveller op 30-12-2005 16:57 ]

"Real software engineers work from 9 to 5, because that is the way the job is described in the formal spec. Working late would feel like using an undocumented external procedure."

vrijdag 30 december 2005 17:14

Acties:

Sappie

De Parasitaire Capaciteit!

Opera (versie 8 that is) rendert hem hier hetzelfde als in IE en Firefox. Welke versie van Opera gebruik je?

offtopic:
Die javascript in je source is niet erg netjes hè

Specs | Audioscrobbler

vrijdag 30 december 2005 17:37

Acties:

crisp

Devver

Pixelated

Opera 9.0 preview doet het ook prima. Opera versies < 7.5x zijn erg buggy mbt CSS support

Intentionally left blank

vrijdag 30 december 2005 22:31

Acties:

Reveller

Hopla!

Topicstarter

@Sappie, crisp - dat scheelt me een hoop gepeins! Ik gebruikte Opera 7.51. In Opera 8.02 (new gedownload) ziet de pagina er goed uit. Die enkeling die dan Opera < 7.5x gebruikt, heeft pech.

BTW: GoT ziet er in 7.51 altijd wel goed uit

"Real software engineers work from 9 to 5, because that is the way the job is described in the formal spec. Working late would feel like using an undocumented external procedure."

zaterdag 31 december 2005 00:22

Acties:

crisp

Devver

Pixelated

Reveller schreef op vrijdag 30 december 2005 @ 22:31:
BTW: GoT ziet er in 7.51 altijd wel goed uit !

De GoT layout is ook gemaakt in de tijd dat Opera 7.5 de laatste versie was. Opera 7.2x support heb ik toen al moeten droppen omdat daar bugs in zaten waar ik echt niet goed omheen kon werken

Intentionally left blank

Pagina: 1

Reageer