Closed Bug 256985 Opened 20 years ago Closed 20 years ago

CSS Div is not alligned correctly

Categories

(Core :: Layout: Block and Inline, defect)

Product:
Core
Component:
Layout: Block and Inline
Platform:
Other
Linux
Type:
defect
Priority:
Not set
Severity:
normal

Tracking

()

Status:
RESOLVED INVALID

People

(Reporter: dseichter, Unassigned)

Details

(Keywords: testcase)

Attachments

(1 file)

reporter's testcase
1.79 KB, text/html
Details
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>
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.
Attached file 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
I recommend to resolve as INVALID since the layout issue is not a Mozilla bug.
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
Closed: 20 years ago
Keywords: testcase
Resolution: --- → INVALID
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: