Closed Bug 277383 Opened 20 years ago Closed 20 years ago

no right margin

Categories

(Core :: Layout, defect)

Product:
Core
Component:
Layout
Version:
1.7 Branch
Platform:
x86
Windows XP
Type:
defect
Priority:
Not set
Severity:
major

Tracking

()

Status:
RESOLVED INVALID

People

(Reporter: phreakx07, Unassigned)

Details

Attachments

(6 files)

Testcase
267 bytes, text/html
Details
No right margin here
711 bytes, text/html
Details
Testcase #3
742 bytes, text/html
Details
right margin dropped
695 bytes, text/html
Details
Screenshot of right margin dropped
41.88 KB, image/jpeg
Details
test4
445 bytes, text/html
Details 
Using the following code correctly creates a centered block in Firefox:

<!-- comment in case bugzilla allows html
<html>
  <body style="background: #fff; text-align: center;">
    <div style="background: #000; margin: auto; width: 512px;"><span
style="color: #fff;">test</span></div>
  </body>
</html>
-->

But I noticed a bug if I specify a margin for the body. I want to specify a
margin for the body to make sure that there will still be space between the
centered block & body regardless of the browser window size.

If I resize the window to be smaller than the width of the block, then the right
margin is dropped while other margins are display correctly. You can view this
bug using the following code:

<!--
</html>
  <body style="background: #fff; margin: 50px; text-align: center;">
    <div style="background: #000; margin: auto; width: 512px;"><span
style="color: #fff;">test</span></div>
  </body>
</html>
-->

I've narrowed the bug to the CSS attribute "margin-right". Once the browser
window is resized to be smaller than the <div> block, then the margin is dropped.

I'm using Firefox 1.0 on Windows XP. This bug is major to me as a web developer,
because it creates a hurdle in my attempts to create a near-perfect tableless
template. Hope to see it fixed in the next release. Thanks!
Summary: margin-right bug → margin-right dropped after resize
Assignee: firefox → nobody
Component: General → Layout
Product: Firefox → Core
QA Contact: general → layout
Version: unspecified → 1.7 Branch
Attached file Testcase — 
(Bugzilla supports attaching files - no need to paste HTML in comments)
As you can see the 50px body margin is maintained also at narrow window widths,
what happen is that the inner block (width: 512px) overflows it.
http://www.w3.org/TR/CSS21/box.html

-> INVALID
Status: UNCONFIRMED → RESOLVED
Closed: 20 years ago
Resolution: --- → INVALID
Attached file No right margin here — 
Check this out. The right margin is not there regardless of the window size.
All other margins are displayed correctly. Is this bug going to be fixed?
Attachment #170569 - Attachment description: No margin right here → No right margin here
Alias: no_right_margin
Status: RESOLVED → UNCONFIRMED
Resolution: INVALID → ---
Summary: margin-right dropped after resize → no right margin
Attached file Testcase #3 — 
Again, if you put a border on the <body> you will see that its right margin
is actually there and that the inner <div> is overflowing since you hardcoded
it's width.
-> INVALID
Alias: no_right_margin
Status: UNCONFIRMED → RESOLVED
Closed: 20 years ago → 20 years ago
Resolution: --- → INVALID
Okay.. I see what you're saying. I apologize for basically submitting the same
thing twice. So the bug is actually an overflowflow issue. Is this considered to
be a seperate bug, or is my coding incorrect for what I want to do?
(In reply to comment #2)
> As you can see the 50px body margin is maintained also at narrow window widths,
> what happen is that the inner block (width: 512px) overflows it.
> http://www.w3.org/TR/CSS21/box.html
> 
> -> INVALID

After admitting that I was wrong, I must say that I was actually right. I
decided to remove the <div> block altogether. I simply placed a border around
body, then a margin on the left & right side of the body. Then I put padding on
the body to make sure it wouldn't collapse after you resize the browser window.

There is no block in the document, unless you classify the body as a block. The
left & right margins are visible if the browser window is maximized. But if
resize the browswer window, then the left margin is correctly displayed but the
right margin is dropped.

If I am wrong here please explain to me in detail what it is that I'm doing
wrong. The right margin should be displayed regardless of the window size, correct?
Status: RESOLVED → UNCONFIRMED
Resolution: INVALID → ---
Attached file right margin dropped — 
Sorry. Here is an example of the right margin being dropped without a <div>
block, but by simply adding style to the body.
I even created a screenshot of what is going on, in case you are not getting
the same thing. As you can see the left margin if still visible after I resize
my browser window, but the right margin is not.
That's because you've set the padding:100px; set on the body element in the
"right margin dropped" testcase. That prevents the body from collapsing further
than 200px while shrinking the window.
I think here is the place where it explains why it happens:
http://www.w3.org/TR/CSS21/visudet.html#blockwidth
Excerpt: "If the 'direction' property has the value 'ltr', the specified value
of 'margin-right' is ignored and the value is calculated so as to make the
equality true.".
So I think Mozilla is doing the right thing here.
Thanks Martijn, I was just about to point to that paragraph too.
Bradley, you can also check with Opera that does exactly the same thing.

-> INVALID
Status: UNCONFIRMED → RESOLVED
Closed: 20 years ago → 20 years ago
Resolution: --- → INVALID
I appreciate all your help & I hope that I didn't seem too demanding. I can
always find alternative methods to get the right margin to display regardless of
the window size. Do you have any great suggestions?
Attached file test4 — 
Something like this is what you want, I guess.

I had to use an extra div, min-width (or width) on the <html> element doesn't
seem to generate the necessary scrollbar on the viewport. This is probably a
bug, I guess, and a known one.

Bradley, if you have any other questions, further, you can e-mail me.
Or you could use the mozillazine forums.
Ah, the possible bug I mentioned in comment 17 is bug 262702.
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: