Firefox 11 displays pictures at center of screen

[Guest]

Thanks a lot, I don’t mind the centering, but the black background was messing with transparent images that depend on a white background.

[KWierso]

I prefer this style:

Code: Select all

@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document regexp("((.*\\.(png|apng|jpg|jpeg|gif|tiff|bmp))|(^data:image\\/.*))(\\?([^#]*))?(#(.*))?") {

html > body > img:only-child[style^="cursor: -moz-zoom-"] {
  background:#FFFFFF !important;
}

html > body > img:only-child:not([style^="cursor: -moz-zoom-"]) {
  border-radius: 5px !important;
  background:#FFFFFF !important;
  padding: 15px;
}

}

Keeps the image centered on the page. The entire page isn't blindingly white around the image. The image's background is white for those transparent pictures that expect white. And there's a lightbox effect around the image.

[theshadowofgold]

I guess there always will be someone to complain about something new

Because I find it very confusing...

Often I'm used to particular sites (e.g. Apple) that specifically program how their images are displayed. I click on their images to enlarge, which displays the image against a dark gray background, so I'm used to clicking away from the image to return to the rest of the webpage.

Now when I view an individual image with Firefox 11/12, clicking away from it does nothing, so now I have to figure out, each time, if the gray background is from Firefox or another website, and I think that's very confusing to me because it fools me into thinking that whatever site I'm on has their own code to present enlarged images centrally in my browser.

[MarkRH]

Hmm.. just now noticed this change. The background color that's used now is a dark grey, or hex value: #222222

I'll leave it alone for now. Kinda like the change I think.

[prtoday]

Thanks to the "add on" I'm saved! But here's another reason why "centering all images" and "adding a background color" - while "aesthetically nice" - DESTROYS the whole point of web-hosting images without adornments: With the background color added and the image centered - you CANNOT hold down the left button on your mouse and copy and paste the image into an e-mail or into an online HTML composer like what you would use, for example, when you sell something at eBay. Crazy!

[JayhawksRock]

you CANNOT hold down the left button on your mouse and copy and paste the image into an e-mail or into an online HTML composer like what you would use, for example, when you sell something at eBay. Crazy!

But I can right click and do a copy and paste

[ADTC]

Thanks for the style, KWierso. I changed the border padding to 5px in my version.

To anyone wondering, you gotta put it in userContent.css (NOT userChrome.css). It's here:
C:\Users\<username>\AppData\Roaming\Mozilla\Firefox\Profiles\<random profile id>.default\chrome\userContent.css

The style however (or at least the border) didn't work on this image and it doesn't work on large images (I didn't test on large images with transparent backgrounds though).

[ADTC]

Oh, wait my bad. The large images don't show the border until they are zoomed out. But it still doesn't explain why the linked image doesn't show the border. It's small enough to do so!

[KWierso]

The style however (or at least the border) didn't work on this image and it doesn't work on large images (I didn't test on large images with transparent backgrounds though).

That's because the style explicitly isn't applied to images with the style attribute set to -moz-zoom-*. The extra padding it adds to the image makes it too wide when zoomed out, and looks weird when zoomed in. (It does still apply the white background behind the image, it just doesn't get the lightbox effect.) I'm not sure why that image gets the style="-moz-zoom-in" set on it.

[ADTC]

That's because the style explicitly isn't applied to images with the style attribute set to -moz-zoom-*. The extra padding it adds to the image makes it too wide when zoomed out, and looks weird when zoomed in. (It does still apply the white background behind the image, it just doesn't get the lightbox effect.) I'm not sure why that image gets the style="-moz-zoom-in" set on it.

I tested the linked image further by modifying the style to apply a red background/border when zooming in (just for testing purpose). Normal images now show white border when within window frame, and red border when zoomed in too much and overflows the window frame. But the linked images shows neither white border nor red border! It's as though that image is not getting recognized at all. Notice the URL doesn't have image extension at all - could that be the problem? But I do see a ^data:image thing in your style.

[Frank Lion]

But the linked images shows neither white border nor red border! It's as though that image is not getting recognized at all. Notice the URL doesn't have image extension at all - could that be the problem?

Yep, it is not defined as an image.

That regexp in the code is a throwback to when we wanted to change only the image background and leave normal backgrounds as they were. As the above code is not changing the main body (background) colour then it is not needed. For your purposes just this should work -

Code: Select all

html > body > img:only-child[style^="cursor: -moz-zoom-"] {
  background:#FFFFFF !important;
}

html > body > img:only-child:not([style^="cursor: -moz-zoom-"]) {
  border-radius: 5px !important;
  background:#FFFFFF !important;
  padding: 15px;
}

This stuff is covered by these 2 bugs (and there's a few more floating about) - https://bugzilla.mozilla.org/show_bug.cgi?id=376997
https://bugzilla.mozilla.org/show_bug.cgi?id=713555#c24

As I now use FF10 ESR, I amusingly had to recode my stuff to centre the image and change the image background (note, this is different to the body > img:only-child background)

[MarkRH]

Thanks to the "add on" I'm saved! But here's another reason why "centering all images" and "adding a background color" - while "aesthetically nice" - DESTROYS the whole point of web-hosting images without adornments: With the background color added and the image centered - you CANNOT hold down the left button on your mouse and copy and paste the image into an e-mail or into an online HTML composer like what you would use, for example, when you sell something at eBay. Crazy!

I'm able to left-click and drag an image into a graphic editor or whatever, even when viewing the image in the "view image" mode with it centered on the screen. I am not using any add-ons or user styles that mess with the images, however.

[Frank Lion]

I am not using any add-ons or user styles that mess with the images, however.

It wouldn't matter if you were, background position and colour (!) do not affect left click image dragging in any way. It was a totally bogus point.

[Dingler]

you CANNOT hold down the left button on your mouse and copy and paste the image into an e-mail or into an online HTML composer like what you would use, for example, when you sell something at eBay. Crazy!

But I can right click and do a copy and paste

Ctrl+A then Ctrl+C/Ctrl+V works too.

[ADTC]

That regexp in the code is a throwback to when we wanted to change only the image background and leave normal backgrounds as they were. As the above code is not changing the main body (background) colour then it is not needed. For your purposes just this should work -

Yup, it works perfectly even for the linked image. I was afraid it might screw up images displayed inside pages but it didn't do any such thing Thanks Frank Lion

For reference, here's my version of userContent.css (note that I changed the padding to 5px - it looks better to me):

Code: Select all

html > body > img:only-child[style^="cursor: -moz-zoom-"] {
  background:#FFFFFF !important;
}

html > body > img:only-child:not([style^="cursor: -moz-zoom-"]) {
  border-radius: 5px !important;
  background:#FFFFFF !important;
  padding: 5px;
}

PS: I'm not sure if @namespace in the original CSS is necessary - removing it doesn't seem to break anything.