Closed Bug 136002 Opened 23 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: