[ CSS2 + IE6 :( ] Scrollbar binnen de div houden?

[Mx. Alba]

Op mijn nieuwste creatie http://forum-integration.info wil ik bepaalde woorden linken naar hun definitie. Als men erop klikt, opent er een klein windowtje met daarin de definitie van dat woord. Om de boel te testen, heb ik daarvoor één woord uitgekozen: het woord "Allochtone" op http://forum-integration.info/?lang=en&page=thoughts

In IE5.5 ziet het geopende schermpje er heel mooi uit. De donkere rand om de lichte binnenste div is overal even groot. Maar IE6 gooit roet in het eten: een eventuele scrollbar wordt buiten de div geplaatst, waardoor de rechtermarge kleiner wordt. En dat is een esthetische ramp natuurlijk Hoe krijg ik IE6 zo ver dat hij die scrollbar binnen de div plaatst, zoals het hoort?

[edit]

En nog een IE6-weirdness was dat hij de scrollbar van de site zelf niet wilde verkleuren. In IE5.5 is de scrollbar mooi esthetisch geïntegreerd met de site, maar in IE6 bleef het gewoon de lelijke grijze standaardbalk... Ondertussen heb ik de scrollbarvingerverf in de CSS van de body {} naar de html {} verplaatst, misschien dat dat het probleem oplost, maar ik heb hier even geen IE6 bij de hand om het te testen...

* Mx. Alba snapt niet waarom er zoveel verschillen zijn in CSS-interpretatie tussen IE5.5 en IE6....

[ Voor 30% gewijzigd door Mx. Alba op 03-03-2004 14:04 ]

[André]

Door die div op overflow:scroll te zetten?

[Mx. Alba]

André schreef op 03 maart 2004 @ 14:04:
Door die div op overflow:scroll te zetten?

Op het moment heb ik hem op overflow:auto staan. Want als je overflow:scroll doet, tekent hij altijd een horizontale en een verticale scrollbar... Bij overflow:auto tekent hij alleen scrollbars als het nodig is.

Het probleem is dus dat in IE5.5 die scrollbar binnen de div geplaatst wordt: de marge blijft gelijk, het textveld wordt dus iets kleiner - dat is zoals het hoort, omdat de grootte van de div gedefiniëerd is. In IE6 gaat het dus fout: hij plaatst de scrollbars buiten de div, in de marge...

[André]

Ik kan het helaas niet testen want in IE6 laat hij bij mij geen scrollbar zien, hoe klein ik het scherm ook maak.

Edit:
Dus inderdaad de tekst verdwijnt gewoon, IE6 + W2k.

[ Voor 22% gewijzigd door André op 03-03-2004 14:30 ]

[Mx. Alba]

André schreef op 03 maart 2004 @ 14:20:
Ik kan het helaas niet testen want in IE6 laat hij bij mij geen scrollbar zien, hoe klein ik het scherm ook maak.

Dus de tekst verdwijnt bij jou? Dat is niet normaal... Hij staat op "overflow:auto", en bij mij thuis (W98 IE6) laat hij dus wel een scrollbar zien, maar niet goed geplaatst... Op het werk (W2k IE5.5) doetie alles goed.

[Verwijderd]

In IE6, standard-compliant mode, heeft het BODY element geen enkele invloed. Wat de CSS2 spec hier ook over zegt, IE doet er niet aan (niet zo heel erg, het is aanmoedigend, niet verplicht).

Dus IE6 in standard-compliant mode ondersteund overflow en andere scrollbar dingen alleen voor het HTML element.

[Mx. Alba]

Verwijderd schreef op 03 maart 2004 @ 15:48:
In IE6, standard-compliant mode, heeft het BODY element geen enkele invloed. Wat de CSS2 spec hier ook over zegt, IE doet er niet aan (niet zo heel erg, het is aanmoedigend, niet verplicht).

Dus IE6 in standard-compliant mode ondersteund overflow en andere scrollbar dingen alleen voor het HTML element.

En voor divs dan? Thuis laat IE6 wel degelijk een scrollbar zien als een divje met een definitie te klein is voor de tekst die erin gepropt moet worden...

[Verwijderd]

Voor DIVs werkt het uiteraard altijd. Maar volgens mij snapte jij het niet helemaal, of heb ik het verkeerd uitgelegd (linkje naar de CSS21 spec had waarschijnlijk geholpen). Het probleem is namelijk dat je zowel het HTML als BODY element geen scrollbar kunt geven, je geeft de canvas een scrollbar (Voor HTML geld echter dat als je overflow gebruikt op HTML of BODY deze op de canvas wordt gezet).

Zie ook http://annevankesteren.nl/archives/2004/02/canvas

[Mx. Alba]

Verwijderd schreef op 03 maart 2004 @ 16:41:
Voor DIVs werkt het uiteraard altijd. Maar volgens mij snapte jij het niet helemaal, of heb ik het verkeerd uitgelegd (linkje naar de CSS21 spec had waarschijnlijk geholpen). Het probleem is namelijk dat je zowel het HTML als BODY element geen scrollbar kunt geven, je geeft de canvas een scrollbar (Voor HTML geld echter dat als je overflow gebruikt op HTML of BODY deze op de canvas wordt gezet).

Zie ook http://annevankesteren.nl/archives/2004/02/canvas

Oké, dus ik kan geen scrollbarproperties aan het html of aan het body element geven. Hoe verander ik dan het kleurtje van dat ding?

[Verwijderd]

Aah. Ik zei net dat het in IE6 werkt bij het HTML element. Gebruik dus een selector als "html,body" voor wat compatibility.

[Mx. Alba]

Oké, dank voor de tip

Desalniettemin vindt de CCS validator van W3C dat gepiemel aan de scrollbar niet zo grappig. Logisch ook, want volgens de visie van de W3C horen dat soort dingen bij browser scripting, niet bij layout... Toch maar eens een "hackje" maken om het door javascript achteraf te laten doen.

[Verwijderd]

Desalniettemin vindt de CCS validator van W3C dat gepiemel aan de scrollbar niet zo grappig. Logisch ook, want volgens de visie van de W3C horen dat soort dingen bij browser scripting, niet bij layout...

En waar hebben we dat gelezen?

Toch maar eens een "hackje" maken om het door javascript achteraf te laten doen.

Simpelheid lijkt me altijd voorgaan op valideren. Het blijft btw well-formed CSS. Als er iets erg is, is het invalid HTML (en dat is uiteraard alleen erg als de auteur niet weet waar hij mee bezig is). Niet well-formed of zelfs invalid CSS is niet zo erg. Zolang je maar even goed de regels van forward-compatible parsing hebt doorgenomen (geloof me dat het in dit geval prima te doen is, als je geen zin hebt om het te lezen).

[Mx. Alba]

Verwijderd schreef op 03 maart 2004 @ 19:30:
En waar hebben we dat gelezen?

Ik ken de filosofie van W3C. Content = XHTML. Layout = CSS. Alles buiten content of layout = browser scripting. Vandaar dat dingen zoals het target attribute van het anchor tag (<a>) depricated is: dat hoort niet bij content, ook niet bij layout, dus is het browser scripting.

Simpelheid lijkt me altijd voorgaan op valideren. Het blijft btw well-formed CSS. Als er iets erg is, is het invalid HTML (en dat is uiteraard alleen erg als de auteur niet weet waar hij mee bezig is). Niet well-formed of zelfs invalid CSS is niet zo erg. Zolang je maar even goed de regels van forward-compatible parsing hebt doorgenomen (geloof me dat het in dit geval prima te doen is, als je geen zin hebt om het te lezen).

Well-formed CSS of niet, het is niet volgens de standaard En dat veroorzaakt dus problemen. Nu heb ik een CSS code die het perfect doet in IE5.5, maar stuk gaat in IE6. Hier is de relevante CSS code voor het definitieschermpje:

code:

body, html {
  scrollbar-face-color: rgb(150,130,180);
  scrollbar-highlight-color: rgb(150,130,180);
  scrollbar-shadow-color: rgb(190,190,255);
  scrollbar-3dlight-color: rgb(190,190,255);
  scrollbar-arrow-color:  rgb(190,190,255);
  scrollbar-track-color: rgb(190,190,255);
  scrollbar-darkshadow-color: rgb(190,190,255);
}
body {
  font-family: verdana, arial, helvetica, sans-serif;
  font-size: 0.8em;
  background: rgb(150,130,180);
  color: rgb(0,0,0);
  margin: 1.5em;
  padding: 0;
}
div.definition {
  background: rgb(190,190,255);
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  margin: 0;
  padding: 0.5em;
  text-align: left;
  overflow: auto;
}
div.close {
  background: transparent;
  position: absolute;
  bottom: 0.1em;
  right: 1.5em;
  height: 1em;
  margin: 0;
  padding: 0;
  text-align: right;
}

regel 29: "overflow: auto;", IE5.5 doet het perfect, en tekent scrollbars als dat nodig wordt. Maar IE6 vertikt het om scrollbars te tekenen als het schermpje te klein wordt.

regels regel 15: "margin: 1.5em;" en regels 23 en 24: "width: 100%; height: 100%;", IE5.5 doet het perfect, die tekent een heel mooi rechthoekje met aan alle kanten een marge van 1.5em. IE6 hangt dat allemaal aan de wilgen en doet wat hij zelf leuk vindt. Rechts vrijwel geen marge, onder een marge afhankelijk van hoeveel regels tekst er in de div staan. Venstertje te klein? Dan loopt de div van het venster af, ipv scrollbars.

En dan hebben we het nog over validerende code... Laat staan wat voor een bordel (pardon my French) het wordt als je niet-standaard code gebruikt...

[Verwijderd]

Vandaar dat dingen zoals het target attribute van het anchor tag (<a>) depricated is: dat hoort niet bij content, ook niet bij layout, dus is het browser scripting.

Je volgt blijkbaar niet alles ( http://www.w3.org/TR/css3-hyperlinks/ )

En dat veroorzaakt dus problemen.

Waarom? Browsers die conform zijn aan de standaard (Opera, Safari, Mozilla) parsen CSS die niet herkend wordt volgens regels. Dat is het mooie aan specificaties die error-handling behandelen, dat je properties kunt gebruiken die niet overal ondersteund worden (alhoewel het leuker was geweest als ze een -ie- prefix hadden gebruikt).

[Mx. Alba]

Verwijderd schreef op 04 maart 2004 @ 19:21:
Je volgt blijkbaar niet alles ( http://www.w3.org/TR/css3-hyperlinks/ )

Humm... Die jongens weten dus blijkbaar ook niet zo goed wat ze willen

Waarom? Browsers die conform zijn aan de standaard (Opera, Safari, Mozilla) parsen CSS die niet herkend wordt volgens regels. Dat is het mooie aan specificaties die error-handling behandelen, dat je properties kunt gebruiken die niet overal ondersteund worden (alhoewel het leuker was geweest als ze een -ie- prefix hadden gebruikt).

Ik bedoel "problemen" vanuit een web-designers oogpunt: dat het er niet op alle grote browsers (IE5.5, IE6, Opera, Mozilla-achtigen) het zelfde uitziet.

[Verwijderd]

Ik bedoel "problemen" vanuit een web-designers oogpunt: dat het er niet op alle grote browsers (IE5.5, IE6, Opera, Mozilla-achtigen) het zelfde uitziet.

Sinds wanneer bezoeken bezoekers je site met 5 browsers?

[Mx. Alba]

Verwijderd schreef op 05 maart 2004 @ 11:10:
Sinds wanneer bezoeken bezoekers je site met 5 browsers?

Benf, oaich... Maar probleem blijft dat IE6 het voorelkaar krijgt om een layout in geldige CSS, die IE5.5 wel goed interpreteert, toch te vern**ken...

[Mister I]

Hier windows xp + ie6. res= 1280*1024.
En wat ik hier zie, ziet er alles er goed uit.

[Mx. Alba]

Mister I schreef op 05 maart 2004 @ 11:51:
Hier windows xp + ie6. res= 1280*1024.
En wat ik hier zie, ziet er alles er goed uit.

Ook het kleine definitie-popupschermpje als je op een "allochtoon" of "autochtoon" klikt? Dat moet een lichtpaarse "binnendiv" zijn met daaromheen een overal even brede (1.5em om precies te zijn) "buitendiv". Als je het schermpje verkleint, dienen binnen de "binnendiv" de nodige scrollbars te verschijnen.

[ Voor 7% gewijzigd door Mx. Alba op 05-03-2004 11:53 ]