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




13 years ago
13 years ago


(Reporter: xmarksthespot007, Unassigned)


1.8 Branch

Firefox Tracking Flags

(Not tracked)



(2 attachments)



13 years ago
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

Comment 1

13 years ago
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.) 
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 ;-)

Comment 2

13 years ago
Created attachment 207526 [details]
image of @-character

Comment 3

13 years ago
Comment on attachment 207526 [details]
image of @-character

<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>

If was align="middle", not valign, bigger images seem to work ok in ff 1.5

Comment 4

13 years ago
Created attachment 207548 [details]
testcase using character above

testcase shows align="middle" and valign="middle", and 2nd set framed by a 4 pix thick yellow border


13 years ago
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

Comment 5

13 years ago
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

the testcase attachment 193282 [details] also reproduces this bug 322073 on my FF

Comment 6

13 years ago
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).

Comment 7

13 years ago
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 shows the same) (both marked):

I assume IE shows it right.

Comment 8

13 years ago
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
You need to log in before you can comment on or make changes to this bug.