CSS layout doet het in FireFox, maar niet in IE

[F e r o x]

Ik heb een lay-out gemaakt in css. Deze doet het in FireFox (er zitten wel nog enkel foutjes in), maar in IE is het totaal verkeerd. Hieronder staan de links:

http://users.skynet.be/sb154697/test.html
http://users.skynet.be/sb154697/stylesheettest.css

Wat moet ik veranderen, zodat het in beide browsers goed wordt weergegeven?

[skate master]

Ik denk dat het wel handig is dat je dan even vermeld wat je bedoeling is,
en wat er dan niet goed is!
Dan kunnen we je ook beter helpen.

[Onbekend]

Probeer eens div.left, div.right en div.containercenter aan te passen.
Misschien iets uitproberen met position: absolute; voor alle drie.

[F e r o x]

Ik heb qua position, enzo. al alles geprobeerd die er in mij opkwam.

Wat ik vraag: wanneer je de site bekijkt met FireFox, is het dus gewoon de bedoeling dat hij er in IE, exact hetzelfde uitziet:

een linker kolom, het middenstuk en dan de rechterkolom. Heel het boeltje die dan gecentreerd staat door een overkoepelende div. Het middenstuk bevat een header, een content-vak, een footer, en een ruimte (in het geel), die de overige plaats, tot de onderkant van de pagina, opvult.

[ Voor 47% gewijzigd door F e r o x op 08-10-2006 18:44 ]

[Onbekend]

Kijk eens naar deze pagina: http://www.w3.org/
Download deze pagina met de css.
Nu kan je stuk-voor-stuk de code gaan verwijderen totdat je alleen de basis hebt voor 3 kolommen.

[MrVulcan]

Begin je HTML in ieder geval met een doctype zodat er niet in quirksmode wordt gerenderd.

[F e r o x]

Die hele website ontleden is mij net iets teveel van het goede. Iemand die kan helpen met de gegeven code? Een doctype zal ik ook toevoegen.

edit: doctype toegevoegd, heeft niets veranderd.

edit 2: heb het in orde gekregen. Wat met de pixels aangepast enzo.

Nu heb ik nog een andere vraag. De linker- en rechterkolom komt niet even hoog als het middenste stuk. (je moet de browser verkleinen, en dan naar beneden scrollen).

[ Voor 53% gewijzigd door F e r o x op 08-10-2006 20:55 ]

[André]

Tja, een beetje eigen moeite is wel vereist, dus wat heb je zelf al geprobeerd?

[Polichism]

Ook onbekend schreef op zondag 08 oktober 2006 @ 18:50:
Kijk eens naar deze pagina: http://www.w3.org/
Download deze pagina met de css.
Nu kan je stuk-voor-stuk de code gaan verwijderen totdat je alleen de basis hebt voor 3 kolommen.

http://validator.w3.org kan je meteen de fouten uit je html code halen en daarna uit je css.
En ik durf te wedden. dan werkt de site onder firefox, opera, mozilla en IE

[F e r o x]

André schreef op maandag 09 oktober 2006 @ 08:56:
Tja, een beetje eigen moeite is wel vereist, dus wat heb je zelf al geprobeerd?

Huh, een beetje moeite? Ik ben hier al uren bezig geweest, om die paar div'jes juist te krijgen in FireFox, IE, en Safari. Mijn eerste grote probleem (foute weergave tussen verschillende browsers), heb ik compleet zelf opgelost. Dus zeggen dat ik nog geen moeite gedaan heb?

En van die linker- en rechterkolom die niet even hoog komt als het middenstuk. Als je gewoon de pagina
opent ziet het er correct uit. Maar wanneer je het browser-venster verklein (in de hoogte), en dan eens naar beneden scrollt, dan zie je dat de 2 buitenste kolommen (in het roze), maar ze hoog zijn als het verkleint browservenster. Wat ik hier al heb voor zitten proberen: positions aanpassen (relative, absolute), magins aanpassen, bottom aanpassen, parent div's op maximum hoogte krijgen, ... Ik vind maar niet waar het probleem zit.

[NMe]

F e r o x schreef op maandag 09 oktober 2006 @ 13:28:
Huh, een beetje moeite? Ik ben hier al uren bezig geweest, om die paar div'jes juist te krijgen in FireFox, IE, en Safari. Mijn eerste grote probleem (foute weergave tussen verschillende browsers), heb ik compleet zelf opgelost. Dus zeggen dat ik nog geen moeite gedaan heb?

Ter indicatie: je doet niet eens de moeite die nodig is om ons te vertellen wát het dan is wat IE verkeerd doet. Probeer dus (de volgende keer?) wat meer uit de voeten te doen wat er eigenlijk verkeerd gaat en wat je al geprobeerd hebt om het zaakje op te lossen, want topics als deze zijn stiekem gewoon waardeloos voor het forum. Wij weten niet hoe jouw site eruit moet zien, dus moeten we 1 op 1 gaan vergelijken, terwijl jij het in één zinnetje had kunnen vertellen.

[F e r o x]

Mijn uitleg was misschien ver van compleet, maar wat moest ik zeggen. Het trok gewoon op niets in IE. Alles stond door elkaar en verkeerd, het was gewoon de bedoeling dat het eruit zag als in FireFox, wat wel juist werd weer gegeven. Maar genoeg hierover, iemand die me kan helpen met de hoogte van de 2 buitenste kolommen?

[MBV]

Bij mij doet hij exact hetzelfde in Firefox als in IE: de kolommen zijn +- 100% van de viewport-grootte hoog, wat je ziet zodra je naar beneden scrollt.

Misschien zit er een foutje in je CSS, misschien niet. Door een foutje in je HTML-doc kom ik daar niet achter: http://jigsaw.w3.org/css-...be%2Fsb154697%2Ftest.html
zie ook: http://validator.w3.org/c...be%2Fsb154697%2Ftest.html

Als je daar nou eens mee begint, kleine moeite toch?

Ik denk trouwens dat je niet met je met foutjes zit, maar met een denkfout: je hoogte van je body kan hoger zijn dan 100% van je viewport. En position: absolute; height: 100% zorgt precies voor het effect wat je beschrijft... Ik denk dus dat je op een paar plekken overflow:auto neer moet zetten, en dat hij dan meer doet wat jij wilt.

[F e r o x]

Maar hoe komt het dan dat de middenste kolom (met het geel onderaan), wel telkens tot onderaan de pagina komt (zelfs met scrollen), en de 2 buitenste niet?

In verband met dat foutjes: hij toont inderdaad dat er een foutjes inzit, maar in mijn code staat het wel juist (zie de links van html), dus dat kan ik niet oplossen, maar dit zal ook wel niet zorgen voorm ijn probleem hier.

En hoe bedoel je met overflow: auto? Dan gaat hij een paar scrollbars weergeven, maar dit heb ik ook niet nodig. Je mag altijd de code wat veranderen en tonen wat je bedoelt.

[SURFivor]

kun je laten zien hoe de pagina eruit komt te zien als deze helemaal is ingevuld?

ik heb het idee dat veel opmaak onnodig is en dat er veel makkelijkere oplossingen denkbaar zijn. het gebruik van procentuele waarden in je css is ook niet echt de meest geweldige oplossing.

code:

<?xml version="1.0" encoding="utf-8"?>

weghalen, is niet van toepassing op je pagina

code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

deze vervangen met die transitional doctype die nu op je pagina staat

[ Voor 8% gewijzigd door SURFivor op 09-10-2006 23:17 ]

[F e r o x]

Ik zal de zaken toevoegen, en weghalen die je zei. Laten zien hoe hij er uiteindelijk zal uitzien kan ik nog niet, omdat er flash-bestanden, afbeeldingen en tekst zal inkomen. Zoals het er nu uitziet is het goed. Maar het werkt gewoon nog niet heel, wanneer je moet scrollen.

[MBV]

Het is heel simpel. Je hebt links en rechts op 100% gezet, en die content-container ook. Die worden dus 100% hoog. Maar zodra je er meer inzet (bijv boxen van in totaal 575px hoog) dan gaan die boxen vrolijk naar onderen door. Als je die contentcontainer (gele ding) een overflow:auto meegeeft dan denk ik dat hij al doet wat jij denkt dat je zegt.
Maar vergeet niet dat je 2 tegenstrijdige dingen roept: de buitenste mág maar 100% hoog zijn, terwijl zijn inhoud 575px hoog móet zijn. Dus je ziet altijd ergens een scroll-balk, of er valt inhoud weg...

En strict toevoegen voegt in mijn ogen niet zoveel toe. Met flash etc kan je daar problemen mee krijgen

[ Voor 9% gewijzigd door MBV op 10-10-2006 00:10 ]

[F e r o x]

De buitenste moeten geen 557 pixels hoog zijn van inhouden. Er komt gewoon een afbeelding in van één pixel hoog, en die wordt dan uitgerokken tot de hoogte van de middenste container. Dus de middenste is nu perfect van hoogte, en het is de bedoeling dat de buitenste even hoog komen ...

[MBV]

nogmaals: links en rechts zijn 100%, afhankelijk van je schermhoogte. midden is minimaal 575 vanwege de inhoud (alle boxen erin heb je **px meegegeven). Hoe je het gaat fixen weet ik niet, ik leg je uit waar het probleem zit. Dan kan je daar zelf mee aan de slag, zoveel tijd heb ik namelijk niet teveel ofzo

er zijn talloze tutorials voor 3-col-layout, ga er eens eentje zoeken die onafhankelijk van wélke kolom de grootste is altijd de grootste hoogte heeft. Ik weet dat hij bestaat, en hij is minder dan een maand geleden nog langsgekomen op dit forum.

[ Voor 28% gewijzigd door MBV op 10-10-2006 22:51 ]

[F e r o x]

Heb net zitten zoeken, maar vind toch nergens een lay-out die 3 kolommen weergeeft, waarvan de middenste (minstens) 575 pixels heeft ...

[denyos]

ik heb niet gecontroleerd of de layout die je zoekt er tussen staat, maar eigenlijk verwacht ik het wel.
blog.html.it/layoutgala/
en anders staat er op deze pagina waarschijnlijk wel een layout die enige overeenkomsten heeft met wat jij wilt, waarmee je alsnog jouw probleem zou moeten kunnen oplossen

[ Voor 38% gewijzigd door denyos op 11-10-2006 06:57 ]

[MBV]

Je moet niet op zoek naar een 3-col layout die de middelste minstens 575px maakt, je moet op zoek naar een 3-col layout die zo hoog is als de hoogste kolom. Of de middelste dan 575px of 800px is maakt niet uit . Jij zorgt met die blokken erin er toch wel voor dat je middelste 575px is . Als je dan de linker of rechter 100% kan maken (ben ik niet zeker van) ben je klaar.

En als je de middelste op overflow:auto zet, dan zal hij voor de middelste een scrollbar laten zien als het niet past. Volgens mij zit je dan al aardig in de richting van wat jij wilt. Je kan zelfs zeggen dat hij alleen vertikaal een scrollbar moet geven.

je hebt trouwens nog een probleem: in FF valt je 'left'-blokje weg als je hem smaller maakt. Ook dat komt door een mix van percentages en absolute waarden: left: 50% en margin-left: -400px werkt niet samen...

[ Voor 14% gewijzigd door MBV op 11-10-2006 12:08 ]

[F e r o x]

OK, ben eens heel anders bezig voor het op te stellen. Maar als je zegt dat left: 50% en margin-left: -400px niet past, hoe moet je dan wel een div centreren, en dat er scrollbars tevoorschijn komen, wanneer het er niet in past? Ik heb het altijd zo geleerd, maar het werkt inderdaad nu niet (bij tabellen wel).

[MBV]

code:

left: auto; right: auto; width: ***px;

dit werkte dacht ik, maar weet ik niet zeker. Je zou het ook met margin-left en margin-right op auto kunnen proberen.
De totale breedte is altijd 'constant', de viewport.
totaal = left + margin-left+border + padding + width + padding + border + margin-right + right
als je alles constant maakt behalve left en right of margin-left/margin-right, dan ben je er dus

Maareh, dat hebben al die 3-col-layouts al opgelost voor je

[ Voor 7% gewijzigd door MBV op 11-10-2006 15:31 ]

[F e r o x]

Margin-left, en margin-right, werkt voor één enkele div te centreren, maar enkel in FireFox. In IE staat hij gewoon links-boven in de hoek ...

edit: ik heb het dus nu compleet anders aangepakt. Ik heb maar 1 div gemaakt, en de 3 kolomweergave achtergedaan door middel van een achtergrond. In FireFox heb ik het gecentreerd door margin-left en margin-right, maar in IE heb ik gewoon een simpele text-align gebruikt. Alles ziet er nu goed uit, en de middenste kolom is altijd zichtbaar door een scroll die erin komt (niet voor de linkse- en rechterkolom). Er is nog één klein detail: er is namelijk een pixel zichtbaar tussen de middenste kolom en de rechterkolom (rood). Enkel in IE (altijd wel een probleem met IE). Iemand die weet hoe die weg te werken valt?

edit2: de links:
http://users.skynet.be/sb154697/test2.html
http://users.skynet.be/sb154697/stylesheettest2.css

[ Voor 76% gewijzigd door F e r o x op 11-10-2006 16:42 ]

[MBV]

kijk eens op www.positioniseverything.net en dat soort sites. Hebben wat hacks om IE-problemen te omzeilen.

[ Voor 32% gewijzigd door MBV op 11-10-2006 16:46 ]