transparent border - bug?

I think it is a bug, can someone confirm it? 

I couldn't get transparent border to work correctly in Opera. Actually only
IE7 rendered it correctly in my tests (Opera, Konqueror, Firefox, IE6)...

It seems the other browsers inherit the background-color from the parent
container and use it as border color, while I think they should really be
transparent, showing the text behind for instance.

What do you think?

http://www.w3.org/TR/1998/REC-CSS2-19980512/box.html#propdef-border-color
"transparent 
The border is transparent (though it may have width)."

I think that IE7 was the only browser in this moment to implement correctly
this behaviour.

Thanks,

Rodrigo.

On Tue, 17 Jul 2007 12:55:07 -0300, Rodrigo Rosenfeld Rosas wrote:

> I think it is a bug, can someone confirm it? 
> 
> I couldn't get transparent border to work correctly in Opera. Actually
only
> IE7 rendered it correctly in my tests (Opera, Konqueror, Firefox, IE6)...
> 
> It seems the other browsers inherit the background-color from the parent
> container and use it as border color, while I think they should really be
> transparent, showing the text behind for instance.
> 
> What do you think?
> 
> http://www.w3.org/TR/1998/REC-CSS2-19980512/box.html#propdef-border-color
> "transparent 
> The border is transparent (though it may have width)."
> 
> I think that IE7 was the only browser in this moment to implement
correctly
> this behaviour.

8.5.3: "All borders are drawn on top of the box's background."

It seems to me that you also need a transparent background
to make transparent borders work.

<http://luden.se/tmp/trans-border.html>

Div 3 (dotted outline) has transparent borders.

Nisse Engström wrote:

> On Tue, 17 Jul 2007 12:55:07 -0300, Rodrigo Rosenfeld Rosas wrote:
> 
>> I think it is a bug, can someone confirm it?
>> 
>> I couldn't get transparent border to work correctly in Opera. Actually
>> only IE7 rendered it correctly in my tests (Opera, Konqueror, Firefox,
>> IE6)...
>> 
>> It seems the other browsers inherit the background-color from the
parent
>> container and use it as border color, while I think they should really
be
>> transparent, showing the text behind for instance.
>> 
>> What do you think?
>> 
>>
http://www.w3.org/TR/1998/REC-CSS2-19980512/box.html#propdef-border-color
>> "transparent
>> The border is transparent (though it may have width)."
>> 
>> I think that IE7 was the only browser in this moment to implement
>> correctly this behaviour.
> 
> 8.5.3: "All borders are drawn on top of the box's background."
> 
> It seems to me that you also need a transparent background
> to make transparent borders work.
> 
> <http://luden.se/tmp/trans-border.html>
> 
> Div 3 (dotted outline) has transparent borders.
> 
> 
> /Nisse


Thank you very much Nisse. I thinked about that for a moment and concluded
that you may be right. That helped me to redesign my CSS to achieve the
result I wanted...

But I really think that this comment should be in another section than 8.5.3
since it is not specific to this section. It should be probably right after
8.5 (Border properties).

But thank you for noticing that. :)

Regards,

Rodrigo.

Rodrigo Rosenfeld Rosas wrote:

> Nisse Engström wrote:
> 
>> On Tue, 17 Jul 2007 12:55:07 -0300, Rodrigo Rosenfeld Rosas wrote:
>> 
>>> I think it is a bug, can someone confirm it?
>>> 
>>> I couldn't get transparent border to work correctly in Opera.
Actually
>>> only IE7 rendered it correctly in my tests (Opera, Konqueror,
Firefox,
>>> IE6)...
>>> 
>>> It seems the other browsers inherit the background-color from the
parent
>>> container and use it as border color, while I think they should
really
>>> be transparent, showing the text behind for instance.
>>> 
>>> What do you think?
>>> 
>>>
http://www.w3.org/TR/1998/REC-CSS2-19980512/box.html#propdef-border-color
>>> "transparent
>>> The border is transparent (though it may have width)."
>>> 
>>> I think that IE7 was the only browser in this moment to implement
>>> correctly this behaviour.
>> 
>> 8.5.3: "All borders are drawn on top of the box's
background."
>> 
>> It seems to me that you also need a transparent background
>> to make transparent borders work.
>> 
>> <http://luden.se/tmp/trans-border.html>
>> 
>> Div 3 (dotted outline) has transparent borders.
>> 
>> 
>> /Nisse
> 
> 
> Thank you very much Nisse. I thinked about that for a moment and concluded
> that you may be right. That helped me to redesign my CSS to achieve the
> result I wanted...
> 
> But I really think that this comment should be in another section than
> 8.5.3 since it is not specific to this section. It should be probably
> right after 8.5 (Border properties).
> 
> But thank you for noticing that. :)
> 
> Regards,
> 
> Rodrigo.

I found another annoying behaviour.

When the border is transparent, the links behind the border are active.

I'm trying to get some css based menus to work, using hover selector and ul
and li elements. But between the expanded menu items there is a transparent
border (I didn't use margin because of issues with some other browsers and
it has the same problems in Opera). The problem is that when moving the
mouse between two expanded items in menu, if there is a link behind, it
will break the expanded menu. It didn't happen neither in IE (although IE6
couldn't render the transparent border correctly) nor in Firefox or
Konqueror.

The menu z-index was the maximum one.

Is Opera behaviour correct and the others wrong? I think that transparent
doesn't mean empty, do you agree?

Thanks,

Rodrigo.

On Tue, 17 Jul 2007 12:55:07 -0300, Rodrigo Rosenfeld Rosas
<lbocseg@yahoo.com.br> wrote:

>I think it is a bug, can someone confirm it? 
>
>I couldn't get transparent border to work correctly in Opera. Actually only
>IE7 rendered it correctly in my tests (Opera, Konqueror, Firefox, IE6)...
>
>It seems the other browsers inherit the background-color from the parent
>container and use it as border color, while I think they should really be
>transparent, showing the text behind for instance.
>
>What do you think?
>
>http://www.w3.org/TR/1998/REC-CSS2-19980512/box.html#propdef-border-color
>"transparent 
>The border is transparent (though it may have width)."

You should really be looking at the CSS 2.1 spec., not CSS 2.

According to CSS 2.1, the initial color of borders should be "the
value of the 'color' property"[1].  Note that the default value of
border-style is none and the default value of border-width is medium.

>I think that IE7 was the only browser in this moment to implement correctly
>this behaviour.

IE's box model is broken, so I highly doubt it's doing the correct
thing.  See
http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug for
details.

[1] http://www.w3.org/TR/CSS21/box.html#border-color-properties

-- 
Tim Altman
Desktop QA
Opera Software