Open Bug 322073 Opened 19 years ago Updated 3 years ago

<img src="myimage.gif" valign="middle"> and rendering text in relation to image

Categories

(Core :: Layout, defect)

1.8 Branch
defect

Tracking

()

UNCONFIRMED

People

(Reporter: xmarksthespot007, Unassigned)

Details

Attachments

(2 files)

User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9a1) Gecko/20051230 Firefox/1.6a1 Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9a1) Gecko/20051230 Firefox/1.6a1 Lets say you have some text here and then small image <img src="myimage.gif" valign="middle" border="0"> and some text after image. In FF 1.07 valign="middle" seems to work as expected, but not anymore in FF 1.5 and FF 1.6a2. Valign="middle" was handy for example if you wanted to replace @ in an email address with an image of @... Reproducible: Always
can you attach a testcase? 1. Upload your small gif using the link in the Attachment table above: Create a New Attachment (proposed patch, testcase, etc.) https://bugzilla.mozilla.org/attachment.cgi?bugid=322073&action=enter 2. copy the address of the attachment 3 [review]. use this address in your HTML 4. test if your HTML is working locally, using the gif downloaded from bugzilla 5. upload the HTML 6. test the uploaded HTML of course you don't need to test if you are sure, I always test before and after submitting ;-)
Attached image image of @-character
Comment on attachment 207526 [details] image of @-character <html> <body> <p>Some text before the image<img src="https://bugzilla.mozilla.org/attachment.cgi?id=207526" align="middle">and some text after the image</p> </body> </html> If was align="middle", not valign, bigger images seem to work ok in ff 1.5
testcase shows align="middle" and valign="middle", and 2nd set framed by a 4 pix thick yellow border
Severity: trivial → minor
Component: General → Layout
OS: Windows XP → All
Product: Firefox → Core
QA Contact: general → layout
Hardware: PC → All
Version: unspecified → 1.8 Branch
while searching for this bug i've come across a possible cause. (without deeper understanding of the code) it looks at least suspicious. bug 192077 attachment 193281 [details] [diff] [review] - { "middle", NS_STYLE_VERTICAL_ALIGN_MIDDLE },//verified + { "middle", NS_STYLE_VERTICAL_ALIGN_MIDDLE_WITH_BASELINE }, the testcase attachment 193282 [details] also reproduces this bug 322073 on my FF 1.5.0.1
just checked that the current behaviour is correct according to the specs. (there's no valign for img and align=middle is slightly different from css vertical-align:middle) so this bug may well be closed as invalid. however, i'd like to point out that the current behaviour of (v)align=middle breaks the compatibility (of the resulting html-layout) to at least one other widely used browser (ie6) and even mozilla (any version before the change).
Looks like this bug is the one I've found with this embedded CSS: <a href="bla"><img src="bla.gif" alt="" style="vertical-align:middle; border:none; padding: 0px;" width="16" height="16" />&nbsp;link text</a> That's the result in IE 6.0 (top) and SeaMonkey 1.0.2 (bottom, Firefox 1.5.0.4 shows the same) (both marked): http://img64.imageshack.us/img64/3995/alignmentproblem9zw.png I assume IE shows it right.
although i can't really see the difference in the image, i think what rené is trying to show is that with vertical-align:middle 1) ie puts the img center at the vertical center of the font bounding box 2) moz puts the img center at the font baseline plus half the height of lowercase glyphs moz (2) is correct according to the css specs, ie (1) is wrong this bug is about the html attributes' interpretation, not about the css' interpretation. but two comments concerning this bug: - comment 7 shows once more how handy (see comment 0) valign=middle was - in fact it seems currently impossible (even with css) to reproduce ie's alignment with mozilla
Severity: minor → S4
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: