Why did my pages get larger? Options

[PapaGeek]

I have no idea why this happened, but a few weeks ago, all of the pages that I was displaying in my FireFox browser seemed to get larger.

I created a page for a gaming group that I am into. The idea was to create an image of gaming tiles that was exactly 6 tiles wide and 4 tiles deep with each tile being exactly 207 pixels square. For some reason, the tiles suddenly became, at control 0, 282 pixels square. The text on the page also got larger, and the predefined page sizes of my other pages also got larger.

I found a post that talked about changing the “layout.css.devPixelsPerPx” entry in the “about:config” from -1.0 to 1.0, but that did not fix the problem. I kept playing with the number an discovered that changing the value to 0.74 made the images and the pages display the same way they were a few weeks ago.

Here is the link to the main page that I provided for the gaming group. The individual tile images are not on this page, but the large blank printer setup image is. That image was too large before the change to take a screenshot of it, but now it does display as 1242 x 828, exactly 6 x 4 times 207, so you can take a screenshot of it!

My Webpage


Does anyone have any idea of what else might have changed a few weeks ago to make all of my pages display larger than normal?

[Christian J]

Missed the print part. In that case you can make a stylesheet for print media, using physical length units like inches or millimeters. Something like this to start with (I'm not sure what markup and/or CSS selectors you use for the tiles):

CODE

@media print {
    img.tile
    {
        width: 1.75in;
        height: 1.75in;
    }
}

[PapaGeek]

If anyone is interested, the name of the game here is Carcassonne. The concept of the page was to place the game's scoreboard in the center of a 4 tile by 6 tile rectangle where about half of the outer rim tiles would be visible behind the scoreboard when it is printed.

This might not be true for all printer / word processor combinations, but my Microsoft Word talking to my HP 6968 printer allows for 0.12 inch borders. Each Carcassonne tile is about 1 37/48 inches square. 6 tiles would be about 10 5/8 inches wide, leaving only 0.24 inch of margin space on a standard letter size sheet of paper. Also, an image which is 1242 (6 tiles 207) pixels wide is slightly wider than 10 5/8 inches and Microsoft Word will automatically shrink that image to make it fit on the page.

In order to take a Screenshot of my 1242 by 828 image (table) it has to be completely visible on my 1920 by 1080 monitor.

I needed to create an image that was pixel for pixel that I was putting on the page and for some reason, a month or so ago, my web browser decided to display my 207 pixel square images as 279 pixels square! The image was now 1,116px high so it couldn't display fully on my 1080 monitor!


If you follow the BYO link at the bottom of the Tile1 page, you can create the image for yourself and see all of the HTML, CSS, and JavaScript that was used to create it.

The <style> section of my HTML file (CSS) first collapses all of the table and td padding, border, and margins to zero. Then it defines the size for every (JPG) img to 207px square and allows for r0x…r3x for rotate each image 0, 90, 180, 270 degrees.

It then defines an overlay (over the bottom right JPG), position relative, left and top 0 for the GIF scoreboard to be sized and positioned; 621 wide, 414 high, -725 left, -414 top to display the half size scoreboard in the center of the surrounding tiles, then using JavaScript, change the size and position to 1242 wide, 828 wide, -1035 left, -621 top to display the full size scoreboard over all the tiles with the transparent edges displaying half the border tiles.

At this point, copying a Screenshot of the GIF scoreboard would also include the visible portions of the surrounding tiles that are behind the GIF. Again, it is imperative that the GIF’s Screenshot be exactly 1242 by 828 pixels!

It all used to work fine, now it requires that I change the about:config devPixelsPerPx value from -1.0 to 0.74! Why?

[PapaGeek]

First of all, the tool I use to determine the pixel size is an old version of Paint Shop Pro. I copy the image from the web page, then paste it into Paint Shop Pro and when my cursor is over the image, the lower right corner of the application displays the pixel size of the image.

To look at the coding used to create your own Center Scoreboard Tile: follow the link at the bottom of the page to the BYO.htm page. Create and empty directory on your disk, then click on the two “buttons”, [Display the Carcassonne Tiles] and [Display HTML Code]. You can drag and drop the Tiles to the empty directory and then use Notepad to copy the HTML Code and save it as an html file to the same directory. All of the CSS, HTML, and JavaScript coding will be in the html file that you copy.

[PapaGeek]

After posting this problem to the Firefox Support Forum, their recommendation was, in "about:config", to change browser.display.os-zoom-behavior = 0 and restore layout.css.devPixelsPerPx back to its default -1.0 setting. All if working fine with their recommendations. Pixel to PX ratio is nowt 1 to 1!

For some reason browser.display.os-zoom-behavior was set to 1 in my about:config settings. Changing it back to 0 fixed everything!