Closed
Bug 256985
Opened 20 years ago
Closed 20 years ago
CSS Div is not alligned correctly
Categories
(Core :: Layout: Block and Inline, defect)
Tracking
()
RESOLVED
INVALID
People
(Reporter: dseichter, Unassigned)
Details
(Keywords: testcase)
Attachments
(1 file)
|
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>
|
||
Comment 1•20 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.
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•20 years ago
|
||
I recommend to resolve as INVALID since the layout issue is not a Mozilla bug.
|
||
Comment 4•20 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
You need to log in
before you can comment on or make changes to this bug.
Description
•