413699 - populating inline-block elements causes phantom margins on said elements

Status: RESOLVED INCOMPLETE

(Firefox :: General, defect)

Description

[Chris]

User-Agent:       Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.8.1.11) Gecko/20071204 Ubuntu/7.10 (gutsy) Firefox/2.0.0.11
Build Identifier: Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.8.1.11) Gecko/20071204 Ubuntu/7.10 (gutsy) Firefox/2.0.0.11

I apologize profusely if this is invalid/bogus, but it's better safe than sorry and I think I've prepared a reasonable test case for you to work it out anyway.
If an A tag (probably others too) contains certain types of replaced inline elements or block elements, then the box acquired margins on top proportional to the vertical dimension of its child boxes. If the child boxes are not rendered (display:none), then they have no effect on the margin of the parent.

I'm scared that this might be bogus or invalid because I get the same result from safari, opera, virus explorer etc; but I can't find it in the visual formatting model specs.
It made my life fun briefly when I tried to put an image in an inline-block A tag (so I could give it width and height and wrap the line)

In some contexts, the effect can easily be resolved with v-align or positioning, although this will not be suitable in every case.

@ all mozilla developers: thank you for making the web worth browsing.
Once again I apologize if this is an invalid or bogus bug.

Reproducible: Always

Steps to Reproduce:
For author:
1. create A tag in document
2. inline-block with width and height for said tag
3. populate with inline-replacing elements and such, which have nonzero heights

For the um, viewer/client:
Type url, press enter :-p
Actual Results:  
inline-block elements all seem to move to random vertical positions on the suddenly very "tall" line.

Expected Results:  
All elements should retain the initial top and bottom margins. Nothing should become detached from the line or be positioned according to its content.

Tested only with default theme.
Tested in Edubuntu Gutsy with GranParadiso Alpha 8 (build id not known....)
Tested On Win XP Pro SP2 with Minefield 3.0b3pre 2008012304

Comment 1

[Chris]

Attachment: test case - must be viewed in FF3 as FF2 has no inline-block

Comment 2

[Jon]

It's an old report, but I thought I'd just pop in and say that Firefox appears to be behaving according to the specs here. The initial value of vertical-align is baseline, and the baseline of an inline-block is the baseline of the last line box, with some exceptions.

http://www.w3.org/TR/CSS2/visudet.html#propdef-vertical-align

So, in the attachment, the last line of each inline-block should be lined up. Adding underscores between the inline-blocks makes this clearer, and actually makes a decent test case of vertical-align: baseline behaviour.

The "fix" for this behaviour, as noted in the attachment, is to set vertical-align to a nicer value such as top or bottom.

Comment 3

[Tyler Downer [He/Him]]

This bug was originally reported on Firefox 2.x or older, which is no longer supported and will not be receiving any more updates. I strongly suggest that you update to Firefox 3.6.6 or later, update your plugins (flash, adobe, etc.), and retest in a new profile. If you still see the issue with the updated Firefox, please post here. Otherwise, please close as RESOLVED > WORKSFORME
http://www.mozilla.com
http://support.mozilla.com/kb/Managing+profiles
http://support.mozilla.com/kb/Safe+mode

Comment 4

[Tyler Downer [He/Him]]

No reply, INCOMPLETE. Please retest with Firefox 3.6.8 or later and a new profile (http://support.mozilla.com/kb/Managing+profiles). If you continue to see this issue with the newest firefox and a new profile, then please comment on this bug.