0

I'm struggling with a difference between WebKit and Firefox: If one div (B) is nested in another (A) (both having CSS position absolute) but B is geometrically outside A. Desired look is what both WebKit and IExplorer do: 

|---------------|           Desired !! (Webkit,IExplorer)
|A              |
|               |
|            |--|------|
|            |B |      | 
|            |  |      | 
|            |--|------|
|               |
|---------------|

i.e. Chrome: shows B outside A, both have the expected border size

but Firefox: enlarges the border of A to go around.

|-----------------------|      Firefox,  why ... ???
|A                      |
|                       |
|            |---------||
|            |B        || 
|            |         || 
|            |---------||
|                       |
|-----------------------|

How can I force Firefox to behave like Chrome/Safari(and IExplorer) ? Take a look at https://jsfiddle.net/r29knz8z/4/

Is this a Firefox bug ?

Improve this question
1

1 Answer 1

Reset to default
1

The problem in your case seems to be the CSS property outline. If you remove it and mark your boxes some other way (border, background-color or something like that), your example is displayed correctly in Firefox as well.

According to this article, though it's a few years old, Firefox has its problems with outline. So it might be a good idea to look into replacing it in your code.

Improve this answer
2
  • Thanks. That is really annoying that is not fixed for more that 3 years !! Is there at least a bug report for it ? Anyway jsfiddle.net/r29knz8z/6 is quite close to identical - I think there is a sub pixel offset to the original ..... (jsfiddle.net/r29knz8z/5 is worse - without margin:-1px)
    – sebhaase
    Commented Apr 25, 2015 at 14:12
  • There actually is a bug report, but there's a discussion if it's really a bug or if it's in fact Webkit and IE that deviate from the standard: "The 'outline' property is designed to render focus outlines; it should behave as an indication of focus ought to behave. Any other use cases are purely secondary and should only be considered in so far as they do not interfere with drawing optimal focus outlines." (David Baron in the bug reports comments). Your usage of outline as some kind of border replacement might not be the intended way.
    – Henning Kockerbeck
    Commented Apr 25, 2015 at 14:55

Not the answer you're looking for? Browse other questions tagged or ask your own question.