Closed
Bug 728870
Opened 12 years ago
Closed 12 years ago
embedded div within div does not align properly
Categories
(Firefox :: Untriaged, defect)
Tracking
()
RESOLVED
DUPLICATE
of bug 106809
People
(Reporter: eb30750, Unassigned)
Details
Attachments
(4 files)
User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:10.0.1) Gecko/20100101 Firefox/10.0.1 Build ID: 20120209085555 Steps to reproduce: I created a div within a div and attempted to line the child div to the parent's div top, left and width. Height was different value. This alignment issue is not much of an issue when using only a few child divs but I am creating a number of divs that hold graphics that needs to align exactly to the next div. Therefore, it is necessary to insert a correction factor for each child div and manually determine the calculations to make the divs, that are a container for a canvas, map up to each other. Actual results: The child div aligns off by -2px for left and top regardless of whether I use absolute or relative coordinates. Expected results: Uncomment the commented out html and comment out the uncommented and rerun with correction factor. Divs line up exactly as expected.
Updated•12 years ago
|
Attachment #598855 -
Attachment mime type: text/plain → text/html
Comment 1•12 years ago
|
||
you want padding: 0 on the outer div. I suspect this is invalid.
Attachment #598873 -
Attachment mime type: text/plain → text/html
adding padding:0 in parent or child made did not resolve this issue. I have uploaded a new test file. I made no reference to padding in my HTML style attributes, therefore, the default should be 0. Additionally, the preference order for offsets should be overidden by absolute coordinates. Padding, margins, etc. should all work with relative coordinates.
The box model when calculating height and width adds the border height and width to the outside, and the inner content is what the CSS height and width properties are setting. If you really wanted the illusion of borders without the addition they bring to the overall size of DIVs, use the style code from the first example which is effective in this testcase. The second example shows padding:0 has no effect.
This is a dupe of any one of bug 106809, bug 158194, or bug 218715.
Picked the earliest.
Status: UNCONFIRMED → RESOLVED
Closed: 12 years ago
Resolution: --- → DUPLICATE
The first example in the test case file where a correction factor is used with the inset attribute works just as mine does when I add a correction factor to top: and left:. However, the second example using padding does not work. The child div top and left are offset. <div id='graphArea' style='position:absolute; top:700px; left:100px; width:600px; height:500px; overflow-x:hidden overflow-y:hidden; border-style:solid; border-color:orange; padding:0;'> I am using FF 10.0.1 on Fedora 16 that sits on an HP dv7 using ATI Radeon graphics. If the second example is working correctly for others then this could be X or hardware related.
Here is the answer/workaround that maps the child div to the parent div dimensions 1:1 add "display:table;" to the style attribute of the parent div. This attribute is new to me, found it on StackOverflow. There might be a more "correct" solution but for now this works. But why is the question? <div id='graphArea' style='position:absolute; display:table; top:700px; left:100px; width:600px; height:500px; overflow-x:hidden overflow-y:hidden; border-style:solid; border-color:orange;'>
(In reply to eb30750 from comment #7) > The first example in the test case file where a correction factor is used > with the inset attribute works just as mine does when I add a correction > factor to top: and left:. That is not a correction factor. Just setting border:0 or border-style:hidden works on its own in that the DIVs are aligned, the inset in the previous testcase was only used to show it, and this testcase just colors the backgrounds to show it. display:table changes the box model from it's default to include the border in the size, which is why that works. As this bug was about the default box model it's still a dupe of the invalid bug.
You need to log in
before you can comment on or make changes to this bug.
Description
•