Closed Bug 136002 Opened 22 years ago Closed 13 years ago

inconsistant margins (no right margin) when viewing straight image (jpg)

Categories

(Core :: Layout: Images, Video, and HTML Frames, defect)

Product:
Core
Component:
Layout: Images, Video, and HTML Frames
Type:
defect
Priority:
Not set
Severity:
minor

Tracking

()

Status:
RESOLVED FIXED

People

(Reporter: chris, Unassigned)

References

(
URL
)

Details

(Whiteboard: [fixed by bug 376997])

Attachments

(1 file)

screenshot with all margins showing
583.84 KB, image/jpeg
Details 
Running 2002040608/OS X when I view a large (requires horiz. scroll) image
outside of an html doc I see that there is some padding/margin being added
around the image. The amount of white space is inconsistant and looks bad. The
top and the left are the same, the bottom is slightly larger, and there is NO
space at all on the right side of the image. It is this last bit that bothers me
most.

Although this isn't a major bug I can't imagine it would take much to change.
This shows the current margins around the image. I used
javascript:window.resizeBy(a,b) until I hit the smallest size that didn't have
scroll bars. The inconsitancies around the image should be pretty clear.
So.. what would you expect the rendering to be in your test?  Just have a
scrollbar that lets you scroll a few pixels to the right?
OS: MacOS X → All
Hardware: Macintosh → All
Just some consistancy in the presentation, however that is arrived at. Repeating
the left margin would be fine, deleting it would be ok, too. The current
behavior looks like a mistake.

For reference:

Browsers with no margin: Opera, IE/Mac
Browsers with consistant margin: NN4, IE/PC
To imagelib.  The image document we generate should be changed somehow... not
sure exactly how, to get the desired effect.
Assignee: Matti → pavlov
Status: UNCONFIRMED → NEW
Component: Browser-General → ImageLib
Ever confirmed: true
QA Contact: imajes-qa → tpreston
-> content viewer stuff
Assignee: pavlov → jst
Component: ImageLib → DOM Views and Formatting
QA Contact: tpreston → stummala
Should it really take 9 months to fix what seem like a relatively simple issue
of consistancy??
well the generated document is basically just <html><body><img src="...">
the margin is the default margin for html documents, presumably from html.css or
something like that...

Should the imagedocument add a style around the image
"margin-right:5px;margin-bottom:5px;"? that sounds stupid to me.
Actually, I think the right thing to do may be to take out the silly <p> and to
add styles to the image, yes.

Do you have time to play with that, biesi?

Chris, it's just a matter of priorities and workload... fixing this bug would be
fairly time-consuming compared to the benefits, so no one has stepped up.  Would
you be interested in taking the time to maybe do it?  The code is in 
nsImageDocument::CreateSyntheticDocument at
http://lxr.mozilla.org/seamonkey/source/content/html/document/src/nsImageDocument.cpp#292
and is fairly straightforward; it's just not clear to me what styles should be
set on what elements to get the desired effect.
Just taking a look at the file you referenced, and all I see is the creation of
the doc and the attachment of an image element, but no <p> element as I had
expected after your comments. If at a glance you confirm that the doc is now
simply a blank doc with an image[1] I'll go digging through the default CSS
doc(s) to see if I can find where the cleanup needs to be.

Also, it looks like the file changed some since the auto image resizing landed.
Oddly enough with image resizing on the right and left margins are equal. Its
only when its off and a horizontal scroll bar appears that i'm not seeing the
right margin. This leads me to believe this may not be an issue with the default
doc, but with some collapsing or otherwise poorly handled extra margin.



[1] Not being at all familiar with the mozilla code I got this impression after
seeing this:
http://lxr.mozilla.org/mozilla/source/content/html/document/src/nsImageDocument.cpp#549
> but no <p> element

Yep.  It got removed when the auto image resizing landed recently.  So the new
structure is:

<html><body><img></body></html>

> otherwise poorly handled extra margin

Ah.  Heh.  See, when image resizing is on, we fit the image inside the <body>
content area.  The margin is on the <body>.  So you see a margin.

When image resizing is off and the image is too wide, it overflows the <body>
(which ends at the right edge of the original viewport).  Then the image extends
_past_ the <body> margin and there is no margin.

Simply removing the <body> margins and putting the margin on the <img> should
rectify the situation, I suspect... (you could test this with DOM Inspector).
*** Bug 125319 has been marked as a duplicate of this bug. ***
Another question is whether when viewing an image that there should
be any margin at all. For viewing large images, I prefer no margin at all.

The fix would then be to explicitly set margin to none for the body surrounding
the image. Or to set an special class name to the body, so that res/html.css
can then define it to contain 'margin: none', and that users can overrule it
using userContent.css.

On this topic, how about centering the image in case of single image view, just
like the other media (quicktime, etc)?
> For viewing large images, I prefer no margin at all.

in the vast majority of cases, having the image flush with chrome looks
terrible. IE and NS4 have a margin for a reason.

> how about centering the image in case of single image view, like other media

text/plain isn't centered. Content goes left to right, here in the civilized
world. Anything else is disorienting. Additionally, the image should be
top-most, for quicker mouse access to context functions (copy, save, etc.).

Had anyone tested Boris' suggestion of putting the margin on <img>?
Just played with it a bit. To get consistent borders, all that is needed is
margin-right: 8px on the <img>.

My test document is now this:

<html><body>
<img src="recolte_big.jpg" style="margin-right: 8px;">
</body></html>

All four borders are now 8px. (The elimination of the <p> had already fixed the
bottom being too long)

NOTE that adding a 8px margin to the bottom, or top/right sides makes those two
big. The default <body> margin sets those properly. This additional style is an
appropriate rendering "hint" since the content is one big block element.

Can someone please check in this half-a-line fix? I can make a diff if it's
really necessary, I just don't possess a machine capable of compiling Mozilla.
Blocks: 261534
*** Bug 314667 has been marked as a duplicate of this bug. ***
Better idea for this image viewing/imageDocument thing:
Present the image 'centered' (as least horizontally).
Current web2.0 style is to have content centered in the browser window, and makes thing much better adjusted to the various window sizes...
> Present the image 'centered' (as least horizontally).

Been suggested.  See the bugs on it.
I can find bug 337882 : When viewing an image-only page, the image should be centered. 

So may be we can mark one as 'DUP' of the other?
Component: DOM: Views and Formatting → DOM: CSS Object Model
QA Contact: stummala → general
QA Contact: general → style-system
Assignee: jst → nobody
Component: DOM: CSS Object Model → Layout: Images
QA Contact: style-system → layout.images
Blocks: 655594
Status: NEW → RESOLVED
Closed: 13 years ago
Resolution: --- → FIXED
Whiteboard: [fixed by bug 376997]
Product: Core → Core Graveyard
Product: Core Graveyard → Core
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: