Label text vanishes behind input field when label style is float: left

RESOLVED FIXED

Status

()

defect
RESOLVED FIXED
14 years ago
14 years ago

People

(Reporter: eniel_ams, Unassigned)

Tracking

({testcase})

Trunk
x86
Windows 2000
Points:
---
Dependency tree / graph

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(1 attachment)

(Reporter)

Description

14 years ago
User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.7.6) Gecko/20050319
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.7.6) Gecko/20050319

The problem is illustrated with the html code at the end:

The text between the label TAGS ‘First name:’ disappears behind the input field
in this specific code. I’ve found the same results on linux and W98.

some other points:
Replacing <input . . . /> with just text results in the reappearence of the text
‘First name:’
Using <div> or <img> with the same associated styles leads to the same behaviour.

replacing the style
	input{display:block;}
with
	input label{display:block;}
solves the problem.
HOWEVER
adding display:block to the label style does NOT.

To reproduce copy and paste following into a html code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test Bug</title>
<style>

label{
	float: left;
}

input{
	display:block;
}

</style>
</head>

<body>
<form action="somepage.php" method="post">
		<label for="txtFirstname" id="lblFirstname">First name: </label>
		<input type="text" name="txtFirstname" id="txtFirstname" /> <!-- replace
<input type ... /> with text 'Just Text'-->
</form>
</body>
</html>



Reproducible: Always

Steps to Reproduce:
1.Copy and paste the html code into a html file and view in browser
2.
3.

Actual Results:  
The input field was displayed

Expected Results:  
display the input field and the label text

Comment 1

14 years ago
Posted file reporter's testcase
just added ="text/css" to style to let it validate.
The uploaded file was checked and found to be valid XHTML 1.0 Transitional.

Comment 2

14 years ago
confirming Branch & Trunk:
Mozilla/5.0 (Windows; U; Win98; en-US; rv:1.8b2) Gecko/20050326
Mozilla/5.0 (Windows; U; Win98; de-DE; rv:1.7.6) Gecko/20050321 Firefox/1.0.2
Assignee: general → nobody
Status: UNCONFIRMED → NEW
Component: General → Layout: Form Controls
Ever confirmed: true
Keywords: testcase
Product: Mozilla Application Suite → Core
QA Contact: general → layout.form-controls
Version: unspecified → Trunk
Note that the correct rendering given that CSS is for the input and the label to
overlap.  The only question is which should be painted on top.  Arguably, that
should be the label; that's probably bug 191830.
Depends on: 191830
This is worksforme (label is now on top in the testcase) in current trunk build. Most likely fixed by the frame display lists patch, bug 317375.
Status: NEW → RESOLVED
Last Resolved: 14 years ago
Depends on: 317375
Resolution: --- → FIXED
You need to log in before you can comment on or make changes to this bug.