Thanks, Mark!
Is this a known defect/bug in Opera?
I can't imagine a scenario where I'd intentionally apply an outline to an
invisible element. But, I can see this as a good bit of information where
we've gotten our selectors wrong, or some sort of JavaScript was applied
incorrectly - and we see a box on our page for no good reason. I use outline
for doing wireframes, so this is good to know.
My guess is that this happens because outline is not supposed to be part of the
layout - unlike border. I think I read in Meyer's book Smashing CSS that the
outline is meant to be drawn around the element. So it looks like Opera maybe
is following the letter of the law, while the other browsers are assuming you
don't want to outline what's invisible.
</email>
<signature id="paceaux">
Frank M Taylor
http://frankmtaylor.com
@paceaux
</signature>
On Nov 29, 2011, at 6:42 AM, Mark Richards wrote:
> On Mon, Nov 28, 2011 at 17:36, Paceaux <[email protected]> wrote:
>
>> There's another CSS3 trick you can try, but I don't think it has as wide
>> support as the box-shadow trick. You *do* add border and outline, and then
>> apply outline-offset:
>>
>> border: 1px solid #444;
>> outline: 3px solid #444;
>> outline-offset: 3px;
>>
>
> Just a word of warning to anyone using outline and Opera: Opera renders the
> outline on top of everything, even if it would normally be invisible. This
> makes outline useless to anyone with a complex layout who cares about Opera
> support.
>
> Sample:
>
> <style>
> #a, #b {
> height: 100px;
> width: 100px;
> position: absolute;
> border: 1px solid green;
> }
> #b {
> border: 1px inset red;
> background-color: blue;
> }
> #aa {
> margin: 30px auto;
> height: 40px;
> width: 40px;
> background-color: pink;
> outline: 1px solid pink;
> }
> </style>
> </head>
> <body>
> <div id="a"><div id="aa"></div></div>
> <div id="b"></div>
> </body>
> ______________________________________________________________________
> css-discuss [[email protected]]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
______________________________________________________________________
css-discuss [[email protected]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
