CSS - visibility

[SiliconError]

Ik heb een vraag... wat is correct:

Men neme dit fragmentje html (de rest is voor het gemak even weggelaten):

HTML:

<div id="buitenste">
    Buitenste tekst
    <div id="binnenste">
        Binnenste tekst
    </div>
</div>

Met de volgende CSS:

Cascading Stylesheet:

#buitenste {
    position: absolute;
    visibility: hidden;
}


#binnenste {
    visibility: visible;
}

Mijn boeren logica zegt: als de buitenste niet zichtbaar is, dan is het zo dat de binnenste ongeacht zijn eigen instelling ook onzichtbaar is... maargoed, de W3C specs lijken anders te zijn...

Firefox, Opera en IE geven het binnenste tekstje wél weer, Safari toont het niet.
Als je het position: absolute weglaat, toont Safari het weer wel.
Doet Safari het goed? Of is het een bug in Webkit die opspeelt als je position: absolute gebruikt in de buitenste?

[ Voor 6% gewijzigd door SiliconError op 16-02-2006 20:34 ]

[Verwijderd]

het is een moeilijke vraag, eigenlijk zou binnenste zichtbaar moeten zijn en buitenste niet. position:absolute heeft daar niets mee te maken

als je echt een hoge priotiteit en zekerheid wilt toevoegen, moet je een uitroepteken achter een instelling zetten (even zoeken @ google voor details)

offtopic:
het was toch "visible"?

[SiliconError]

Oh, ik heb het gevonden in de bugzilla van webkit:
http://bugzilla.opendarwin.org/show_bug.cgi?id=5614

Dit lijkt er wel op

[Sappie]

De visibility property wordt niet door child elements inherited. Tevens wordt de layout door elementen die "hidden" zijn beïnvloed (de ruimte die het element in zou nemen in geval van "visible" neemt het nog steeds in). Wanneer je dus een child element van een hidden element "visible" maakt zie je toch dat child element omdat a) visibility niet inherited wordt en b) de plaats om het "visible" te maken er nog steeds is.

zoiets zit t denk.. en Safari doet het mijns inziens dus niet goed

[crisp]

Funny, IE heeft dezelfde bug als Safari
* crisp voegt toe aan testcases voor IE7

[SiliconError]

Heb je het over IE7?
Want in IE6 leek het hier wel goed te gaan (IE7 moet ik ook maar eens testen binnenkort )

[ Voor 32% gewijzigd door SiliconError op 16-02-2006 23:38 ]

[MATANDO]

Als je ipv visibility display gebruikt dan werkt het wel goed. iig in IE6 en safari1.5

#buitenste {
display: none;
}
#binnenste {
display: block;
}

[crisp]

SiliconError schreef op donderdag 16 februari 2006 @ 23:36:
Heb je het over IE7?
Want in IE6 leek het hier wel goed te gaan (IE7 moet ik ook maar eens testen binnenkort )

Hier in IE6 ging het fout (dus met position:absolute), dus ik neem aan dat het in IE7 dan ook nog wel fout zal gaan

MATANDO schreef op donderdag 16 februari 2006 @ 23:51:
Als je ipv visibility display gebruikt dan werkt het wel goed. iig in IE6 en safari1.5

#buitenste {
display: none;
}
#binnenste {
display: block;
}

display werkt anders dan de visibility property. Een element met display:none wordt niet eens gerendered, dus ook child-elements daarvan niet.

[sjaakaq]

Het is wel logisch eigenlijk; een div is een soort doos. Als ik in een onzichtbare doos een zichtbare doos doe, dan zie je die toch ook ?

[Sappie]

leokennis schreef op vrijdag 17 februari 2006 @ 00:15:
Het is wel logisch eigenlijk; een div is een soort doos. Als ik in een onzichtbare doos een zichtbare doos doe, dan zie je die toch ook ?

hmmm.. don't do drugs.. mkay?

[Johnny]

leokennis schreef op vrijdag 17 februari 2006 @ 00:15:
Het is wel logisch eigenlijk; een div is een soort doos. Als ik in een onzichtbare doos een zichtbare doos doe, dan zie je die toch ook ?

Ik heb nog nooit een onzichtbare doos gezien, dus dat kan ik onmogelijk controleren.

een <div> is niet te vergelijken met een doos, de breedte van een doos wordt toch ook niet bepaald door de inhoud en de ruimte daar tussen maar door de lengte van het karton?

[Sappie]

Johnny schreef op vrijdag 17 februari 2006 @ 00:23:
een <div> is niet te vergelijken met een doos, de breedte van een doos wordt toch ook niet bepaald door de inhoud en de ruimte daar tussen maar door de lengte van het karton?

zo heb ik ook nog nooit naar een doos gekeken.. de ruimte tussen de inhoud enzo elk block-level element is een soort van 2d doos (vandaar het BOX-model ).

[bolleh]

tjah er valt voor beiden wat te zeggen

toch vind ik het logischer dat het niet zichbaar zou zijn. immers het zit in een onzichtbaar element. imho zouden ze gewoon allebei als losse optie moeten aanbieden. dan zou je dus hele grote lappen html kunnen hiden door de container div op hidden te zetten

[ Voor 86% gewijzigd door bolleh op 17-02-2006 01:05 ]

[crisp]

Nee, de specificatie is er duidelijk over. Visibility is een inherited property en zorgt ervoor dat boxes niet gerendered worden, maar wel de layout beinvloeden. Als een element daarbinnen weer een computed value 'visible' heeft dan zal die box ook weer gerendered worden. Positioning mag daar verder geen invloed op hebben.
Display is een ander verhaal; daarover zegt de specificatie duidelijk het volgende:

quote: http://www.w3.org/TR/CSS21/visuren.html#propdef-display

none
This value causes an element to generate no boxes in the formatting structure (i.e., the element has no effect on layout). Descendant elements do not generate any boxes either; this behavior cannot be overridden by setting the 'display' property on the descendants.

Please note that a display of 'none' does not create an invisible box; it creates no box at all. CSS includes mechanisms that enable an element to generate boxes in the formatting structure that affect formatting but are not visible themselves. Please consult the section on visibility for details.

[Sappie]

crisp schreef op vrijdag 17 februari 2006 @ 08:31:
Visibility is een inherited property..

het is dan toch juist geen inherited property?

http://www.w3.org/TR/REC-CSS2/visufx.html#visibility

[JHS]

Sappie: Zoals je in de spec die je zelf linkt kan lezen is de default value inherit . Dus in welke zin zou het niet inherited zijn?

[Sappie]

ik zal het idd wel verkeerd interpreteren, maar daaronder staat dan ook weer:

code:

inherited: no

Hoe moet ik dat dan opvatten?

edit: http://www.w3.org/TR/REC-CSS2/about.html#q9 daar wordt het een en ander uitgelegd. Zoals ik dan nu opvat wordt de visibility property dus niet geërfd van zijn parent element.

Initial

This part specifies the property's initial value. If the property is inherited, this is the value that is given to the root element of the document tree. Please consult the section on the cascade for information about the interaction between style sheet-specified, inherited, and initial values.

Inherited

This part indicates whether the value of the property is inherited from an ancestor element. Please consult the section on the cascade for information about the interaction between style sheet-specified, inherited, and initial values.

[ Voor 78% gewijzigd door Sappie op 17-02-2006 09:18 ]

[crisp]

Sappie schreef op vrijdag 17 februari 2006 @ 09:05:
[...]

het is dan toch juist geen inherited property?

http://www.w3.org/TR/REC-CSS2/visufx.html#visibility

Sappie; je loopt een revisie achter: http://www.w3.org/TR/CSS21/visufx.html#visibility

Inherited: yes

en verder:

hidden
The generated box is invisible (fully transparent, nothing is drawn), but still affects layout. Furthermore, descendents of the element will be visible if they have 'visibility: visible'.

[ Voor 3% gewijzigd door crisp op 17-02-2006 09:20 ]

[Sappie]

crisp schreef op vrijdag 17 februari 2006 @ 09:19:
Sappie; je loopt een revisie achter: http://www.w3.org/TR/CSS21/visufx.html#visibility

aii.. dat verklaart een hoop natuurlijk

en verder:
[...]

dat was me dan wel duidelijk

[crisp]

Op zich is het dan ook niet vreemd dat IE het niet goed doet aangezien iig IE6 uitgaat van CSS2.0 waarin dit niet expliciet gedefinieerd was.
IE7 beta 2 doet het echter ook nog steeds fout...

[ Voor 16% gewijzigd door crisp op 17-02-2006 09:25 ]

[Sappie]

Is dan ook maar te hopen dat ze in IE7 final CSS2.1 eindelijk eens fatsoenlijk gaan ondersteunen.. heb me, na 10 minuten naar IE7 beta 2 gekeken te hebben, voorgenomen pas weer naar IE7 te kijken als ie final is

[crisp]

Sappie schreef op vrijdag 17 februari 2006 @ 09:38:
Is dan ook maar te hopen dat ze in IE7 final CSS2.1 eindelijk eens fatsoenlijk gaan ondersteunen.. heb me, na 10 minuten naar IE7 beta 2 gekeken te hebben, voorgenomen pas weer naar IE7 te kijken als ie final is

Als niemand testcases maakt en bugs/tekortkomingen meldt dan ben ik bang dat er weinig meer zal gebeuren...

[Sappie]

crisp schreef op vrijdag 17 februari 2006 @ 09:59:
Als niemand testcases maakt en bugs/tekortkomingen meldt dan ben ik bang dat er weinig meer zal gebeuren...

das dan ook weer waar.. als ik meer tijd zou hebben om me bezig te houden met webdevelopment zou ik daar wellicht ook mijn bijdrage in kunnen hebben, maar die tijd heb ik niet. _{afstuderen is ff belangrijker} Maar ik neem aan dat er genoeg webdevelopers zijn die wèl tijd hebben om zich hier mee bezig houden, dus mijn kleine bijdrage hierin zal wel gemist kunnen worden

[ Voor 7% gewijzigd door Sappie op 17-02-2006 10:05 ]

[crisp]

Sappie schreef op vrijdag 17 februari 2006 @ 10:04:
[...]

das dan ook weer waar.. als ik meer tijd zou hebben om me bezig te houden met webdevelopment zou ik daar wellicht ook mijn bijdrage in kunnen hebben, maar die tijd heb ik niet. _{afstuderen is ff belangrijker} Maar ik neem aan dat er genoeg webdevelopers zijn die wèl tijd en zin hebben om zich hier mee bezig houden.

Vreemd genoeg heb ik dat idee niet echt; op wat losse testcases na ben ik nog geen sites/blogs tegengekomen waar mensen echt doelgericht zijn gaan testen op bugs in IE7's CSS-implementatie.
Zelf ben ik wel al druk bezig en heb al aardig wat testcases in de maak

[Sappie]

crisp schreef op vrijdag 17 februari 2006 @ 10:07:
Vreemd genoeg heb ik dat idee niet echt; op wat losse testcases na ben ik nog geen sites/blogs tegengekomen waar mensen echt doelgericht zijn gaan testen op bugs in IE7's CSS-implementatie.
Zelf ben ik wel al druk bezig en heb al aardig wat testcases in de maak

Wellicht hebben een hoop developers bij voorbaat de hoop op verbetering wat betreft implementatie van CSS al opgegeven. Ik had er eigenlijk uberhaupt geen idee van en kreeg mede door jouw posts in het IE7 topic de indruk dat er wel mensen mee bezig waren. Misschien ben jij dan (helaas) inderdaad één van de weinige fanatiekelingen op dit gebied en gaat de CSS support van IE7 door gebrek aan testen door de community weer tegenvallen.

edit:
maargoed.. we zijn een beetje offtopic aan het raken

[ Voor 9% gewijzigd door Sappie op 17-02-2006 10:20 ]

[SiliconError]

Sappie schreef op vrijdag 17 februari 2006 @ 10:17:
[...]

edit:
maargoed.. we zijn een beetje offtopic aan het raken

Mwah, ik begon mijn topic over een CSS bug in Safari. Voor Safari is het waarschijnlijk een kwestie van tijd voordat het gefixed wordt, maar ieder duwtje dat IE7 in de goede richting kan helpen is mooi meegenomen wat mij betreft

Daarom zal ik ook geen workaround bouwen voor mijn oorspronkelijke probleem - Safari is zo actief in ontwikkeling dat het niet 'mijn probleem' is. Wat IE betreft hoop ik dat het niet mijn probleem gaat worden