CSS Div is not alligned correctly

RESOLVED INVALID

Status

()

RESOLVED INVALID
14 years ago
14 years ago

People

(Reporter: dseichter, Unassigned)

Tracking

({testcase})

Trunk
Other
Linux
testcase
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(1 attachment)

(Reporter)

Description

14 years ago
User-Agent:       Mozilla/5.0 (compatible; Konqueror/3.2; Linux) (KHTML, like Gecko)
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.2; en-US; rv:1.7.2) Gecko/20040803

I added a test case below, which shows a problem with positioning. The right 
red line should be inline with the top and bottoms rectangles right border. 
(the line is a css rectangle with a border with only the left border being 
shown). 
 
The testcase fails on Windows as well as on Linux (with mozilla version 1.7.2 
and 1.6.0). 

Reproducible: Always
Steps to Reproduce:
 
 



<?xml version="1.0" encoding="UTF-8"?> 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<title>TFORMer</title> 
<meta name="GENERATOR" content="TFORMer"> 
</head> 
<body> 
<div 
style="clip:rect(0mm,101.60mm,50.80mm,0mm);position:absolute;top:15.08mm;left:15.08mm;width:101.60mm;height:50.80mm;text-align:left;vertical-align:top;margin:0;padding:0;display:inline;font-family:'Arial';font-size:12pt;line-height:13pt;font-weight:400;font-style:normal;color:#000000;">Show 
a mozilla bug. This test case renders fine in Internet Explorer and Konqueror, 
but fails with Mozilla 1.7.2 on Windows as well as on Linux.<br /> 
<br /> 
The two red lines should have the same x positions as the right/left lines of 
the rectangles below. So that it looks like it would be one line. Unfortunately 
the right line is positioned wrong.<br /> 
<br /> 
</div> 
<div 
style="position:absolute;top:70.96mm;left:35.40mm;width:60.96mm;height:15.24mm;border-collapse:collapse;border-width:1pt;border-style:solid;color:#000000;" /></div> 
<div 
style="position:absolute;top:101.44mm;left:35.40mm;width:60.96mm;height:15.24mm;border-collapse:collapse;border-width:1pt;border-style:solid;color:#000000;" /></div> 
<div 
style="position:absolute;top:86.20mm;left:35.40mm;width:0.00mm;height:15.24mm;border-collapse:collapse;border-width:1pt;border-style:solid;color:#FF0000;border-bottom:none;border-right:none;border-bottom-width:0;border-right-width:0;border-top:none;border-top-width:0;"></div> 
<div 
style="position:absolute;top:86.20mm;left:96.36mm;width:0.00mm;height:15.24mm;border-collapse:collapse;border-width:1pt;border-style:solid;color:#FF0000;border-bottom:none;border-right:none;border-bottom-width:0;border-right-width:0;border-top:none;border-top-width:0;"></div> 
</body></html>

Comment 1

14 years ago
Width doesn't include the width of the border; you need to account for the width
of the left hand border (1pt ~= 0.35mm) when positioning the right red line.



Comment 2

14 years ago
Created attachment 157076 [details]
reporter's testcase

CSS property |width| does not include the border (it's the width of the
content).  CSS property |left| does consider the border (it sets the left
margin edge).  (If that helps clarify.)

http://www.w3.org/TR/REC-CSS2/box.html#box-margin-area

Comment 3

14 years ago
I recommend to resolve as INVALID since the layout issue is not a Mozilla bug.

Comment 4

14 years ago
See "Fix the box ..." at:
http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnie60/html/cssenhancements.asp

See also http://bugzilla.mozilla.org/show_bug.cgi?id=251970#c2


-> INVALID
Status: UNCONFIRMED → RESOLVED
Last Resolved: 14 years ago
Keywords: testcase
Resolution: --- → INVALID
You need to log in before you can comment on or make changes to this bug.