100793 - WRMB:Text and image overlapping with CSS

Status: RESOLVED WONTFIX

(Core :: DOM: CSS Object Model, defect)

Description

[anthonyd]

This seems to be a regression:

On this website for example:
www.saia.com
The menu on the left used to render correctly with Netscape 6.1.  BUt with 
todays trunk, it doesnt render correctly.

It looks fine in IE (whoopty - do)

Comment 1

[rubydoo123]

adding appropriate keywords

Comment 2

[Marc Attinasi]

Lots of absolute positioning issues here - attaching a testcase that is
concentrating on the top row of 'tab's and their text, which is too low.

Comment 3

[Marc Attinasi]

Attachment: testcase - somewhat reduced, focusing on top row of tabs

Comment 4

[Marc Attinasi]

Comment on attachment 52632 [details]
testcase - somewhat reduced, focusing on top row of tabs

Sorry - this testcase is bad in IE too - there is something else on the page that is causing Moz to move the tab-text down, but IE is not being influenced by it.

Comment 5

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

I don't think that testcase shows a bug -- the top margin of the table should
collapse to outside the DIV.  (Or perhaps the spec should say that absolutely
positioned elements should be margin roots?  Floats aren't, though, but absolute
positioning is generally used for hacks like this.)  What happens if you put 1px
of padding (or maybe even 0.1px) on the div with id MainBody?

Comment 6

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

And isn't the issue here something wrong with the menu on the left?  (Although
I'm not sure what right is...)

Comment 7

[Marc Attinasi]

Attachment: Original page with some debug-borders added

Comment 8

[Marc Attinasi]

Looking at the positioned elements with some borders around them (testcase
attached) I see that IE renders the positioned DIV #MainBody with some margin
around it - but Moz provides no margin at all, which is actually correct. If I
provide that DIV a 'top' value of 15px (instead of the 0 it gets by default)
then everythign lines up more or less correctly.

I'm not sure if this is a bug in IE, or a problem with how we calculate our
absolute containing block - I have to investigate further.

Comment 9

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

So is IE positioning the DIV relative to the inside edge of the body's margins?

Comment 10

[Marc Attinasi]

Yes, that seems to be the case. Opera does this too, but their body margin is
smaller so it _almost_ looks correct - about half way between what Moz shows and
what IE shows. 

Shouldn't a positioned block be placed relative to the root element (considering
that it has no other positioned container above it)? This would mean the HTML
element, which should not include the body element's margin I think.

Comment 11

[Marc Attinasi]

The reported problem is that the menu on the left is not aligned properly. I
noticed that the top row of tabs are not aligned correctly either. These
elements are all absolutely positioned, and unfortunately they do not all share
the same containging block, and that is where the differences come from. There
is a div positioned to 0,0, and that contains the images for the left and top
menus. Then, there is are divs positioned at specific pixel locations, but not
contained by the positioend div that contains the menu images. IE positions the
div that contains the menu images relative to the body margin, whereas Moz
positions it relative to the root element. This difference accounts for the skew
in the alignment of the text, which is positioned by another div. Unfortunately,
it looks like the positioning was done empirically using IE as the reference,
but IE does the positioning of the main div incorrectly.

I think that the bug is with IE. I would not want to change Moz's positioning,
even in Quirks mode, because we are following the spec and IE is not, and there
is not really any evidence of this being a common problem. I do not, however,
understand how this has regressed.
Closing as WONTFIX.