Closed Bug 192071 Opened 23 years ago Closed 19 years ago

Overlap of image with floated <input> element shows text in <input> above image

Categories

(Core :: Web Painting, defect)

Product:
Core
Component:
Web Painting
Type:
defect
Priority:
Not set
Severity:
minor

Tracking

()

Status:
RESOLVED INVALID

People

(Reporter: christopher.vance, Assigned: roc)

References

(
URL
)

Details

(Keywords: testcase)

Attachments

(1 file)

testcase
632 bytes, text/html
Details
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.2.1) Gecko/20021130 Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.2.1) Gecko/20021130 When the <input> form element has a CSS float value associated with it, it will float behind images. However, text typed into the input element will appear in front of the images. Reproducible: Always Steps to Reproduce: 1. Visit page http://www.milamberart.com/bugzilla/floatbug.html. 2. Resize the window such that the <input> form element overlaps the image. 3. Type text into the <input> element. Actual Results: The graphic of the <input> element appears behind the image but the text typed into the box appears in front of the image. Expected Results: Overlap with consistency - if the graphic of the <input> is blocked by the image, so should the text. Workaround: Don't float the input element. The problem is potentially solved by floating both the input element and the image. HTML Testcase (same as URL noted for the report) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML><HEAD><TITLE>Problem case: input text</TITLE> <META http-equiv=Content-Type content="text/html; charset=windows-1252"> </HEAD> <BODY> <div> <img src="boring_image.gif" alt="Test image" width="600" height="100"> <form action="javascript:void(0)"> <span> <input style="margin-top: -2em; float: right;"> </span> </form> </div> </BODY></HTML>
I forgot to note that the "margin-top: -2em;" plays a role in the bug - if that is left out of the page, the <input> element will not overlap the image. A try at a workaround to this can be found here: http://www.milamberart.com/bugzilla/floatbug_imagefloatleft.html The <input> element in the workaround URL has a tendency to disappear off the top of the screen (on account of the negative "margin-top" attribute. Same problems occurs with Phoenix 0.5.
Probably a duplicate of bug 182107. When the fix for 182107 is checked in, please retest this. I'm too lazy to do a new build just to see...
Depends on: 182107
Bug 182107 doesn't seem to fix this... seeing it on Linux too (with that patch).
Assignee: float → roc+moz
Status: UNCONFIRMED → NEW
Component: Layout: Floats → Layout: View Rendering
Ever confirmed: true
OS: Windows 2000 → All
Hardware: PC → All
The real bug here is that the input appears behind the image at all. This is another example of content ordering not being preserved.
By the way, I don't think this is a regression ... I think we've always done this testcase wrong. Please let me know if I'm mistaken.
Attached file testcase —
The floated input still appears behind the image in current trunk build.
Keywords: testcase
Actually, I think this bug is INVALID. The <IMG> is inline content. In-flow inline content is always rendered in front of floats in the same containing block, according to CSS 2.1.
Should the text of the input not render in front of the <img>?
No. All parts of a float are rendered in the same layer (between block backgrounds and in-flow inlines).
Oops, yes, you're right. I keep getting confused about this :( I'm marking this bug invalid then. See for an explanation at: http://www.w3.org/TR/CSS21/visuren.html#z-index http://www.w3.org/TR/CSS21/zindex.html
Status: NEW → RESOLVED
Closed: 19 years ago
Resolution: --- → INVALID
Component: Layout: View Rendering → Layout: Web Painting
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: