Closed Bug 276920 Opened 20 years ago Closed 20 years ago

The CSS properties assigned to the first <div> tag do not appear to render correctly.

Categories

(Firefox :: General, defect)

Product:
Firefox
Component:
General
Platform:
x86
Windows XP
Type:
defect
Priority:
Not set
Severity:
normal

Tracking

()

Status:
VERIFIED INVALID

People

(Reporter: trynovar, Assigned: bugzilla)

References

(
URL
)

Details

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.5) Gecko/20041107 Firefox/1.0
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.5) Gecko/20041107 Firefox/1.0

When I load this page in Firefox 1.0, the background-color property is ignored
for the "box1" <div> tag.
http://www.tkadlec.com/practice/sample_page.html

These pages all render properly, that is, the background colors and position
properties are correctly displayed for the first <div> tag, in Opera (ver 7.53)
and IE 6.  I have not tested any other browsers yet.

Is there a "feature" of Firefox that I'm missing or do I need to program an
"empty" <div> tag in order to get my CSS layouts to function properly?

I have attached both the source code for the HTML page and the associated CSS
sheet for each page in the "additional information" section.

Thanks,
Troy Kadlec

Reproducible: Always

Steps to Reproduce:
1.http://www.tkadlec.com/practice/sample_page.html
2.http://www.tkadlec.com/practice/sample_page2.html
3.http://www.tkadlec.com/practice/sample_page3.html

Actual Results:  
All properties for the first <div> tag in the HTML page are ignored.
1.  "Box 1" has no orange box, the background-color is ignored.
2.  The word "empty" is placed under "Box 1" (which now has its orange box) -
"empty" appears to be placed at the beginning of the document.
3.   The word "empty" is placed under "Box 1" (which now has its orange box) -
"empty" appears to be placed at the beginning of the document.  "Box 4" appears
where it should.

Expected Results:  
1.  "Box 1" should have a small orange box around it. (the background-color
should display)
2.  The word "empty" should display to the left and lower than the series of boxes.
3.  "Box 4" should appear below the other 3 boxes and be on the same level with
the word "empty" to its right.

http://www.tkadlec.com/practice/sample_page.html
 HTML Source code:
<html>
<head>
<title>Sample CSS Page</title>
<link rel="stylesheet" type="text/css" href="sample.css">
</head>
<body>
<div id="box1"><h1>Box 1</h1></div>
<div id="box2"><h1>Box 2</h1></div>
<div id="box3"><h1>Box 3</h1></div>
<div id="box4"><h1>Box 4</h1></div>
</body>
</html>

CSS File:
<!-- Stylesheet Practice -->

div#box1 {position:absolute; background-color:orange; top:0; left:0; width:50;
height:50}

div#box2 {position:absolute; background:red; top:25; left:25; width:50; height:50}

div#box3 {position:absolute; background:green; top:50; left:50; width:50; height:50}

div#box4 {position:absolute; background:silver; top:75; left:75; width:50;
height:50}

h1 {font-size:small; font-color:#FFFFFF}



When I add an "empty" <div> tag before the "box1" <div>, the background-color
magically appears, but the word "empty" gets nested behind "box1". 
http://www.tkadlec.com/practice/sample_page.html

HTML Source:
<html>
<head>
<title>Sample CSS Page</title>
<link rel="stylesheet" type="text/css" href="sample2.css">
</head>
<body>
<div id="empty">Empty</div>
<div id="box1"><h1>Box 1</h1></div>
<div id="box2"><h1>Box 2</h1></div>
<div id="box3"><h1>Box 3</h1></div>
<div id="box4"><h1>Box 4</h1></div>
</body>
</html>

CSS sheet with "empty" <div> added:
<!-- Stylesheet Practice -->

div#empty {position:absolute; top:200; left:200; width:50; height:50}

div#box1 {position:absolute; background-color:orange; top:0; left:0; width:50;
height:50}

div#box2 {position:absolute; background:red; top:25; left:25; width:50; height:50}

div#box3 {position:absolute; background:green; top:50; left:50; width:50; height:50}

div#box4 {position:absolute; background:silver; top:75; left:75; width:50;
height:50}

h1 {font-size:small; font-color:#FFFFFF}

Now, to test if other <div> tags are being affected, I change the top position
of "box4" which appears to render just fine.
http://www.tkadlec.com/practice/sample_page3.html

HTML Source:
<html>
<head>
<title>Sample CSS Page</title>
<link rel="stylesheet" type="text/css" href="sample3.css">
</head>
<body>
<div id="empty">Empty</div>
<div id="box1"><h1>Box 1</h1></div>
<div id="box2"><h1>Box 2</h1></div>
<div id="box3"><h1>Box 3</h1></div>
<div id="box4"><h1>Box 4</h1></div>
</body>
</html>

CSS Sheet with altered "top" properties:
<!-- Stylesheet Practice -->

div#empty {position:absolute; top:200; left:200; width:50; height:50}

div#box1 {position:absolute; background-color:orange; top:0; left:0; width:50;
height:50}

div#box2 {position:absolute; background:red; top:25; left:25; width:50; height:50}

div#box3 {position:absolute; background:green; top:50; left:50; width:50; height:50}

div#box4 {position:absolute; background:silver; top:200; left:75; width:50;
height:50}

h1 {font-size:small; font-color:#FFFFFF}
This <!-- comment --> isn't valid in css file. This causes that first rule in
your stylesheet is skipped; you should use this /* comment */ instead.

This bug should be closed and marked as INVALID.
Summary: The CSS properties assigned to the first <div> tag do not appear to render correctly. → The CSS properties assigned to the first <div> tag do not appear to render correctly.
Status: UNCONFIRMED → RESOLVED
Closed: 20 years ago
Resolution: --- → INVALID
Status: RESOLVED → VERIFIED
You need to log in before you can comment on or make changes to this bug.