Bug 5618

Summary:

Misaligned jpg in div

Product:

WebKit

Reporter:

Kristian Norling <jkl>

Component:

Layout and Rendering

Assignee:

Nobody <webkit-unassigned>

Status:

RESOLVED FIXED

Severity:

Normal

CC:

ian, joost, robert

Priority:

Keywords:

HasReduction

Version:

420+

Hardware:

Mac

OS:

OS X 10.4

URL:

data:text/html, <!DOCTYPE html><div style="background-color: #ee0000; width: 120px; height: 30px; margin: 0px; border:1px solid black;"><img src="https://bugs.webkit.org/images/favicon.ico" style="height:10px; width:10px;" align="top">dsa</div><div style="background-color: #ee0000; width: 120px; height: 30px; margin: 0px; border: 1px solid black;"><img src="https://bugs.webkit.org/images/favicon.ico" style="height:10px; width:10px;" align="middle">dsjakl</div><div style="background-color: #ee0000; width: 120px; height: 30px; margin: 0px; border: 1px solid black;"><img src="https://bugs.webkit.org/images/favicon.ico" style="height:10px; width:10px;" align="bottom">dsa</div><div style="background-color: #ee0000; width: 120px; height: 30px; margin: 0px; border: 1px solid black;"><img src="https://bugs.webkit.org/images/favicon.ico" style="height:10px; width:10px;">dsjakl</div>

Attachments:

Description	Flags
Testcase	none

Description Kristian Norling 2005-11-03 11:34:31 PST

When placing a jpg inside a <div> it doesn't align with the bottom of the div, but instead it draws outside 
the box. Se attached testcase (reduction): http://www.kommentar.nu/testcase2.html
This applies to all versions of Safari.

Comment 1 Joost de Valk (AlthA) 2005-12-21 14:11:00 PST

Can't see what's wrong in testcase, firefox does exactly the same, please re-open if you think this should 
be different,  but clarify a bit more then :)

Comment 2 Kristian Norling 2006-01-08 03:21:36 PST

A clarification :)

Updated testcase at http://www.kommentar.nu/testcase2.html - 
In <img> align="top" work as expected. But align="middle" renders the graphic outside of the box (1 
pixel I think), align="bottom" behaves just like align="top"....

It´s true the Firefox 1.5 renders this testcase just like Safari, and so does Camino 1.0. 

Netscape 7.2, IE 5.2 and Opera 8.51 renders the testcase differently.

iCab 3.0.2 renders it almost right. IE 6/win is the only browser that renders the testcase right?

Which rendering is correct? I would like to think that align="middle" should align the graphic in the 
middle of the containing box...

Comment 3 Kristian Norling 2006-01-08 03:30:23 PST

Created attachment 5540 [details]
Testcase

Testcase

Comment 4 Joost de Valk (AlthA) 2006-01-08 03:35:51 PST

ok, confirmed now :). good testcase and explanation.

Comment 5 Kristian Norling 2006-01-08 03:40:09 PST

Correction for Comment #2: 

align="bottom" renders like align="top" in these browsers: Firefox 1.5, Camino 1.0, Netscape 7.2

Safari renders align="bottom" almost like align="middle" should behave?

Comment 6 Robert Hogan 2013-06-03 09:47:57 PDT

As far as I can tell we are aligning correctly. Closing.