CSS probleem met strict html

[Verwijderd]

Hallo allemaal,

Ik heb een probleem als ik in strict html mijn css layout wil bouwen.
Het probleem doet zich voor bij het scrollen.

In Firefox gaat het helemaal goed, als de inhoud van het content-gedeelte te vol is, verschijnt daarin netjes een scrollbalk en kun je dat frame scrollen.

Doe je dit echter in IE (7 in mijn geval) gaat het helemaal fout. Dan scrollt eerst de header weg

Iemand een suggestie?

Groeten Erik

[ Voor 3% gewijzigd door Verwijderd op 18-03-2009 21:48 ]

[Svennetjee]

Ik heb het getest, maar alles werkt volgensmij zoals het zou moeten in IE8 en FF3...
Verder zou ik als je wil testen in xhtml strict, ook even een xhtml strict doctype boven je pagina zetten ipv een html 4.01 transitional

En je meta tags sluit je op twee verschillende manieren af..

[Noork]

De div staat toch gewoon op fixed? Lijkt me normaal gedrag.

Waarom heb je trouwens tables in div's? Wat is daar het nut van?

[Verwijderd]

@ Svennetjes: hem nu ook xhtml strict doctype boven de pagina, thanx. Ook het foutje van de meta-tag afsluiting gefixt. Maar het doet het bij mij nog steeds fout in IE, dat de header en het menu naar boven scrollt.

@ Noork: Hoe bedoel je dat met de div die op fixed staat? Die van de header staat namelijk op absolute.
En de tables in de div's: tsja, vind het makkelijker om dan binnen de div's de boel via tables in te delen. Gedachtenkronkeltje van mij..

[Noork]

uit de CSS:

code:

#inhoud{
position: fixed;
.....
}

[Svennetjee]

En los ook eerst even je xhtml probleempjes op, soms kan het ook daar aan liggen, en het staat gewoon netter om een pagina zonder fouten te hebben

http://validator.w3.org/c...y)&doctype=Inline&group=0

[Verwijderd]

Bedankt voor de hulp van beiden.
Ik zal me eerst eens verdiepen in dat xhtml.

Ik dacht dat je gewoon html kon gebruiken met css, maar nu komt dat xhtml om de hoek kijken, wat me nog niet zoveel zegt.

[Verwijderd]

Waarom gebruik je dan een XHTML 1.0 Strict DTD, en niet HTML 4.01 Strict?

[Svennetjee]

Tjah, of je nou html of xhtml gebruikt.. Op zich geen groot verschil, het is maar net waar je aan gewend bent

[Verwijderd]

Svennetjee schreef op zaterdag 31 januari 2009 @ 16:14:
Tjah, of je nou html of xhtml gebruikt.. Op zich geen groot verschil, het is maar net waar je aan gewend bent

Nee, als iemand HTML 4.01 Transitional gebruikt maar een stricte DTD wil gebruiken, moet je geen XHTML 1.0 Strict aanraden. Dat is naast een voor de hand liggende oplossing meteen een recept om je applicatie nog eens een keer helemaal na te mogen kijken. Het slaat nergens op, want je kunt vrijwel nooit "zomaar" even van een HTML doctype naar een XHTML springen en vice versa.

[Verwijderd]

Ik heb m'n doctype weer naar HTML 4.01 strict gezet.

Maar m'n oorspronkelijke probleem is helaas nog niet opgelost. De

#inhoud{
position: fixed;
.....
}

waar Noork het over heeft, dat is toch juist de bedoeling?

[Verwijderd]

Verwijderd schreef op zaterdag 31 januari 2009 @ 16:21:
Ik heb m'n doctype weer naar HTML 4.01 strict gezet.

Maar m'n oorspronkelijke probleem is helaas nog niet opgelost.

Vooralsnog gebruik je nog steeds tablellen voor layout-doeleinden. Iets zegt me dat je überhaupt nog veel te leren hebt.

Het trucje wat je nu op de body toepast (height: 100%; overflow: hidden;) moet je in "strict" modus ook op de documentElement toepassen, en dat is dus het html element.

[Verwijderd]

Cheatah, inderdaad, ik heb nog een boel te leren, maar stukje bij beetje leer ik meer bij.

Bedankt voor je suggestie, het heeft namelijk enorm geholpen! Alleen zie je nu nog zodra er een verticale scrollbar is, een horizontale scrollbar, die er niet moet komen. Alleen in IE weer
Ga ik me even in verdiepen.

[Verwijderd]

Cascading Stylesheet:

overflow-x: hidden; overflow-y: auto;

[Verwijderd]

Verwijderd schreef op zaterdag 31 januari 2009 @ 16:40:

Cascading Stylesheet:

overflow-x: hidden; overflow-y: auto;

Ja die had ik ook al geprobeerd, maar dat werkt niet helemaal naar behoren.

Als je namelijk een scrollbalk zou moeten krijgen, en je refresht, zie je geen scrollbalken meer. Pas als je je venster kleiner/groter maakt verschijnen ze weer.

[Verwijderd]

Ik krijg dit niet goed, maar kan op internet ook niet vinden dat dit een know issue is.
Iemand een suggestie?

[Noork]

Positioneer de div's gewoon relatief van elkaar. Zoek maar eens op 'float:left". Overigens zijn er tig voorbeelden van een "header-menu-content"-layouts te vinden.

zie b.v. http://www.strictlycss.co...three-column-layout-9.asp

[teh_twisted]

zolang je HTML/XHTML niet valide is voor de browser gaat deze de pagina in 'quirks' mode behandelen en kan je dus css'en wat je wilt maar dan als je daarna je html fixed loop je grote kans dat het alsnog net werkt

en HTML 4.x Strict t.o.v. XHTML 1.x Strict is nogal een extreem verschil sinds de ene door een SGML parser wordt getrokken en de andere door een XML parser.... XML wilt dat je _alles_ afsluit bv

code:

<br /><hr /><img />

just my 2 cents...

[Kiphaas7]

teh_twisted schreef op zaterdag 31 januari 2009 @ 21:32:
zolang je HTML/XHTML niet valide is voor de browser gaat deze de pagina in 'quirks' mode behandelen en kan je dus css'en wat je wilt maar dan als je daarna je html fixed loop je grote kans dat het alsnog net werkt

Misschien dat je het bedoelt, maar ik haal het niet 1-2-3 uit je verhaal, maar standardsmode wordt toch getriggerd door het (correcte) gebruik van een doctype, en niet door correct gebruik van html?

[teh_twisted]

Kiphaas7 schreef op zaterdag 31 januari 2009 @ 21:42:
[...]


Misschien dat je het bedoelt, maar ik haal het niet 1-2-3 uit je verhaal, maar standardsmode wordt toch getriggerd door het (correcte) gebruik van een doctype, en niet door correct gebruik van html?

Nee, als je de doctype opgeeft van XHTML 1.1 strict en daarna aankomt zetten met <br> dan valt firefox bv. gewoon weer terug in de quirks mode, geen idee wat IE er precies mee doet (nooit uitgezocht).
Heeft te maken met de XML parser die over de zeik gaat en dus zoiets heeft van: m'kay, weetjewat, we doen 't gewoon ff opnieuw maar dan zonder al die nette regeltjes. Dus dan is opzich, door 1 stomme verkeerde tag al je andere 'nette' werk voor niets geweest.
Mijn advies, pak Firefox, install de Webdeveloper toolbar: https://addons.mozilla.org/en-US/firefox/addon/60
en evt. Firebug: https://addons.mozilla.org/en-US/firefox/addon/1843

De webdeveloper toolbar heeft heel strak 3 icoontjes naast elkaar:
da's de standards mode aan (tweakers site)
en da's de quirks mode aan (random broken site)

Heb je dus tijdens 't ontwikkelen gewoon goed zicht op wat er gebeurt, en als er een element ofzo iets raars doet kan je met firebug waanzinnig snel ontdekken waarom 't nou mis gaat ik vind firebug iig onmisbaar geworden bij 't ontwikkelen

[Verwijderd]

Goedemorgen allemaal,

Bedankt voor het meedenken over dit issue!

@Noork: die heb ik inderdaad ook gevonden, maar het probleem daarvan is dat ze niet schermvullend zijn. Dat wil ik wel graag namelijk en dat is die van mij wel.

@teh_twisted: Ik gebruik alleen HTML, geen XHTML. Mijn HTML is strict en valide.
Helaas is de tip om FF te gebruiken met de debuggers ook geen optie (doe ik overigens ook al), omdat het in FF wel goed gaat

Misschien kan het wel gewoon niet wat ik wil.

[crisp]

teh_twisted schreef op zaterdag 31 januari 2009 @ 21:32:
zolang je HTML/XHTML niet valide is voor de browser gaat deze de pagina in 'quirks' mode behandelen en kan je dus css'en wat je wilt maar dan als je daarna je html fixed loop je grote kans dat het alsnog net werkt

Dat is onzin, enkel de doctype bepaald standardsmode of quirksmode.

en HTML 4.x Strict t.o.v. XHTML 1.x Strict is nogal een extreem verschil sinds de ene door een SGML parser wordt getrokken en de andere door een XML parser.... XML wilt dat je _alles_ afsluit bv

code:

<br /><hr /><img />

Ook onzin, XHTML wordt alleen als XHTML behandeld als het ook met de juiste content-type verstuurd wordt wat in 99% van de gevallen op het web niet zo is.

[Kiphaas7]

Om te voorkomen dat de hele html 4.01 strict vs. xhtml discussie weer wordt aangezwengeld, hier een oud topic (de discussie is al ontelbare keren gevoerd):
HTML of XHTML voor de herintredende hobbyist

[ Voor 11% gewijzigd door Kiphaas7 op 01-02-2009 10:59 ]

[Verwijderd]

Niet dat ik zeurderig wil overkomen, maar zou iemand mij willen helpen met m'n vraag van zondag 01 februari 2009 10:26 ?

[mcDavid]

Dat is de vraag of een dusdanige layout beeldvullend kan zijn?

Ja dan gebruik je een breedte in % in plaats van in px. Zorgen dat je totaal op 100% uit komt en klaar.

[Verwijderd]

Hehehe nee dat is de vraag niet echt.

Het probleem is: Als je een scrollbalk krijgt in het content-vlak, en je refresht, zie je geen scrollbalken meer. Pas als je je venster kleiner/groter maakt verschijnen ze weer.

Krijg met geen mogelijkheid dit goed.

[Svennetjee]

Kun je iets meer tekst in het content vak plaatsen? Er is nl. te weinig tekst in het tekstvak om scrollbalken te krijgen @ 1024x768. In FF kan ik het nog wel een beetje testen door dmv firebug wat extra tekst te plaaten, maar in IE is dat geen optie..

[Verwijderd]

Het Svennetjee, het gaat er juist om als je het venster wat verkleint.

[mcDavid]

Hmm nu zie ik de bug inderdaad.

Zou dit niet kunnen komen door de brakke table-rendering van IE? Probeer het eens met divs!

[Svennetjee]

Hmm, ik heb blijkbaar geen last van die bug. FF3, IE8, IE8 Compatibility Mode, werkt allemaal..

[ Voor 17% gewijzigd door Svennetjee op 01-02-2009 18:27 ]

[mcDavid]

Het ging specifiek om IE7 idd.

[Svennetjee]

Emuleerde IE8 IE7 niet via compatibility mode? Of kan dat dan weer net even anders uitpakken dan met een echte IE7 client?

[mcDavid]

Het zou me niets verbazen als ze een aantal (van ditsoort) bugs in de IE7 renderengine wel gefixt hebben...

[Verwijderd]

Nou ik heb alle tables verwijderd en hier divs van gemaakt, maar de bug blijft bestaan.

Ik begrijp er werkelijk niets van

[Verwijderd]

Hem hem nu even op NIET-strict gezet, dan is bovenstaand probleem wel opgelost.
Alleen wordt dan in IE de header niet 100% uitgevuld horizontaal

[mcDavid]

je hebt nu helemaal geen docytpe, dus gaat'ie in quirks-mode.

En, die tekst ("welkom enzovoorts.") staat nog steeds in een table.

Een layout als deze kun je maken met 3 divs:
de header: width: 100%, height 10%, menu: width 10% height 90% float:left, content: width 90% height 90% overflow:scroll

volgens mij is dat genoeg.