I need some advice on this one. The new feature added to webkit in bug nr #7138 is a great new addition. I did however encounter some problems (probably not a bug though). If you put two divs next to each other and put tab order on them they will get the blue default outline. When you tab between them you will notice that the outline is broken and rendered underneath one of the divs. It seems that the div that was added last or with the highest z-index will have its outline rendered on top of the first div. This is the exact same behavior as in firefox and I have heard that some people use outlines to debug their layouts so this might be the intended behavior. IE however works completely different. It does not have the outline property and it's focus rectangle is not drawn on the outside, but inside the component so the "outline" is never broken in IE. The only way I have come up with to solve this is to add margin to my components. Then the outline will lie inside the margin and will never be broken. The problem is that adding margin causes a mess in my situation. Is there any other solution to getting the outline to not be cut off? Is there any way to make it render on top of everything or perhaps offset it so it renders inside, like in IE? Anyone have any guidance regarding this? /Johan
On May 7, 2008, at 7:43 AM, Johan Lund wrote:
Is there any way to make it render on top of everything or perhaps offset it so it renders inside, like in IE?
<style> :focus { outline-offset: -4px; } </style> (or you can add the rule to your user style sheet). You can also change the outline color, style and thickness.
participants (2)
-
Dan Bernstein
-
Johan Lund