[CSS] outline in Opera ligt bovenop fancybox

[amoen]

Hoi hoi,

Ik ben bezig in een eigen cms en loop tegen een raar probleem aan in Opera.
Ik heb een element, in dit geval een div met zowel een border als een oultine. Zie hieronder mijn css code:

Cascading Stylesheet:

#buttonContainer {
    border:1px solid #bbb;
    outline:#ddd solid 1px;
    padding:4px;
    background-color:#eaf7ff;
    display:inline-block;
}

Werkt PERFECT in de nieuwere browsers die outline ondersteunen: IE8, FF, Chrome, en Opera.
Alleen als ik een fancybox eroverheen open, dan blijven die outlines eroverheen zichtbaar. Als voorbeeld heb ik hier een gifje:


Ik kan het op google echt nergens vinden, en ook hier op het forum ben ik geen topic hierover tegengekomen.

Heb al geprobeerd de z-index van mijn element naar achteren te gooien, maar dat helpt niks.

[Juup]

Zal wel een bug zijn in opera.
Bug rapporteren bij Opera

[Roa]

Niet geheel ontoppic, maar wat is het nut van een outline? Zodat je een border en een outline kan doen? Mooie effecten? Puur een dubbele border dus..?

[_Thanatos_]

Voordeel van een outline is dat het "buiten" het element ligt. Het druk dus nooit andere elementen aan de kant omdat het overal bovenop ligt. En dat is in dit geval ook gelijk het nadeel. Een outline ligt altijd bovenop, ongeacht de z-index. Dat is de aard van het beestje gewoon.

Misschien dat er browsers zijn die een mooie berekening doen om te voorkomen dat outlines niet bovenop popovers komen, maar het gedrag lijkt me begrijpelijk en niet per definitie fout.

[Spinal]

Misschien te veel werk, maar kun je niet bij het aanroepen van de fancybox via JS de outline uitzetten?

[amoen]

Hoi,

Ik gebruik de outline inderdaad om die dubbele lijn te krijgen en zo een soort van mini schaduw-effect te creëren. Dit kan dan zonder dat ik er nog een extra element eromheen moet plaatsen met ook een border.
Zo heb ik ook alle input-velden die extra outline gegeven wat een erg mooi effect is.

Het uitschakelen van de outline bij het starten van de fancybox, daar heb ik over nagedacht, maar elke keer als ik weer een nieuwe class bedenkt waarbij ik een outline gebruik, moet ik die weer opnemen in mijn javascript. bovendien moet ik bij het sluiten de outline weer aanzetten. Lijkt me een onhandige work-around.

_Thanatos_ schreef op maandag 11 mei 2009 @ 21:48:
...Een outline ligt altijd bovenop, ongeacht de z-index. Dat is de aard van het beestje gewoon...

is dat wel zo? want waarom blijft de ouline dan in de andere browsers netjes achter de fancybox?

[Bosmonster]

Volgens mij is de outline property bedoeld om selectie van een element aan te geven en niet om te stylen. Vandaar ook dat het niet de dimensies aanpast of andere elementen wegdrukt, zodat je normaal door een pagina kunt tabben zonder dat alles verspringt. Daarmee kan ik dus ook niet zeggen of het wel zo slecht is dat die outline altijd bovenop ligt.

[ Voor 27% gewijzigd door Bosmonster op 12-05-2009 10:22 ]

[Fuzzillogic]

Goed punt. De CSS3-spec vermeldt ook dit: "This specification does not define how multiple overlapping outlines are drawn, or how outlines are drawn for boxes that are partially obscured behind other elements." De CSS2-spec vermeldt dat al niet eens. Oftewel: het is geen bug van Opera, omdat er geen "correcte" manier van renderen is in dit soort gevallen.

Het lijkt erop dat outline vooral voor de browsers zelf bedoeld is. Het is, zoals aangegeven in de spec, bedoeld als highlighting van het element met focus. Opera gebruikt het als je met keyboard navigeert, net als de (Webkit-)browser van m'n mobiel. En met dat in het achterhoofd vind ik het zelfs logischer om de outline NIET mee te nemen met eventuele transparantie, maar altijd volledig opaque en zichtbaar te renderen. Precies wat Opera doet.

Gewoon border gebruiken dus.

[ Voor 20% gewijzigd door Fuzzillogic op 12-05-2009 12:37 ]