Thejaka Maldeniya
Reputation: 1076
A discrepancy in rendering between Firefox vs Chrome, Edge, Safari
Some days ago, I posted a problem to SO. Admittedly, the initial post was composed in a bit of a hurry, and somewhat incomplete. This was voted as off-topic. Even though the final edited version of the question doesn't seem to me to be off-topic, the fact remains that the question was closed.
In order to try and comply with the inherent (and in my opinion, not always perfectly fair, as I believe a chance should be given to rephrase the problem if necessary, and some assistance could be given in the way of suggestions) limitations of SO, I'm attempting to rephrase the problem. It goes as follows.
A few years back, I wrote a little tool (app) to overlay a grid on an image to generate printable images for Cross-Stitch work. At the time, I specifically wrote this for Firefox, but I generally expected it would work in any modern browser. However, now I find that it only seems to work in Firefox! (Not even in Firefox Focus).
The problem statement, this time around, is: This page renders more or less as expected in Firefox Desktop Browser. Is Firefox handling the page (app) in a standards compliant manner or not? If not, can anyone possibly explain a bit what's going on? In either case, is there a simple workaround to get this page to work as expected in major modern browsers other than Firefox? (i.e. Chrome, Edge, Opera, Safari, and mobile versions of similar browsers, including Firefox Focus). In other words, if this code is standards compliant, how do I deal with non-compliant browsers, or else is it possible to make the code standards compliant without having to change it too much?
The expected behavior of the page (app): Click on Browse, and pick an image, then click Generate. The image should be displayed below with a grid overlaid on top of it (or alternatively, you could look at it as the image being divided into squares or rectangles). There are additional details to how exactly the image ought to be rendered, stating which would lengthen this post unnecessarily, but you'd probably be able to figure these out by taking a look at the available customizable fields of the app and possibly by experimenting with them. These parameters generally are there to change the grid cell size (height, width), page margins, options to fill the page/image with squares etc.
This is old code, and I don't want to rewrite it significantly...
IIRC, I was attempting to get the img to take the full size of the containing div, hence position:absolute, and wdth:100%, height:100%. But at the same time, I was trying to size the containing div to fit the content, i.e. the grid. It's the grid that defines the size. The image is supposed to scale into that space...
To me, it appears that browsers aren't honoring the sizes specified for the grid, probably because it's empty, but my attempts to fix that failed...
EDIT 1: As per suggestions, I finally got around to reducing the code to the key parts of the HTML and CSS. I was hoping for an answer that applies broadly to the complete code, but anyone wanting to get to the core problem can take a look at the following snippet. Note: I haven't yet tested this code in browsers other than FF Desktop, but I believe this should demonstrate the issue...
table {
border-collapse: collapse;
}
col {
width: 30px;
}
tr {
height: 30px;
}
table, td {
border: 1px solid red;
}
#div {
display: inline-block;
position: relative;
}
#img {
position: absolute;
width: 100%;
height: 100%;
z-index: -1;
}<!DOCTYPE html>
<html>
<body>
<div id="div">
<img id="img" src="https://www.w3schools.com/js/landscape.jpg">
<table>
<thead>
<col>
<col>
<col>
</thead>
<tbody>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
</tbody>
</table>
</div>
</body>
</html>Complete Code:
/*********************************************\
** Copyright © 2017-2019 Thejaka Maldeniya **
\*********************************************/
'use strict';
(function (a) {
a.i()
}(
{
z: 0, // image file data URL
p: '3', // previous value of units (default: Millimeters)
f: { // functions
_: function (l, e, h) { l.addEventListener(e, h, 0) },
l: function (a, f) { // load files
if (f.length) {
f = f[0]
var l = a.u.l, r = new FileReader()
l.name.innerHTML = f.name
a.f._(r, 'loadend', function (e) {
l.preview.src = a.z = e.target.result
})
r.readAsDataURL(f)
}
},
r: function (x) { // round to 3 decimal places
return Math.round(x * 1000) / 1000
},
f: function (a, b) { // get conversion factor
var f = 0
if (a == b) f = 1
else {
// if either a or b is not known, factor will be 0
// first, convert to Millimeters
switch (a) { // previous units value
case '1': // Inches
f = 25.4
break
case '2': // Centimeters
f = 10
break
case '3': // Millimeters
f = 1
}
// second, convert from Millimeters
switch (b) { // new units value
case '1': // Inches
f /= 25.4
break
case '2': // Centimeters
f /= 10
break
case '3': // Millimeters
// no change
}
}
return f
},
c: function () { // units or size value changed
var t = this, l = a.u.l
, r = t.r // round function
, width = l.width.value, height = l.height.value // A4
, mt = l.top.value, mb = l.bottom.value, ml = l.left.value, mr = l.right.value // margins
, w = l.w.value, h = l.h.value // width, height of cell
, m = l.m.value, n = l.n.value // width, height of grid
, s = 'A4' // paper size
, f = t.f(a.p, a.p = l.units.value) // unit conversion factor
, g = t.f('3', l.units.value) // unit conversion factor for default values (currently in Millimeters)
l.width.setAttribute('readonly', '')
l.height.setAttribute('readonly', '')
switch (l.size.value) {
case '0': // Custom
l.width.removeAttribute('readonly')
l.height.removeAttribute('readonly')
g = f
break
case '1': // Letter
width = 216
height = 279
l.rotate.checked = 0
s = 'Letter'
break
case '3': // Legal
width = 216
height = 356
l.rotate.checked = 0
s = 'Legal'
break
case '6': // A3
width = 297
height = 420
l.rotate.checked = 0
s = 'A3'
break
case '7': // A4
width = 210
height = 297
l.rotate.checked = 0
s = 'A4'
break
case '8': // A5
width = 148
height = 210
l.rotate.checked = 0
s = 'A5'
}
l.width.value = r(width * g)
l.height.value = r(height * g)
l.top.value = r(mt * f)
l.bottom.value = r(mb * f)
l.left.value = r(ml * f)
l.right.value = r(mr * f)
l.w.value = r(w * f)
l.h.value = r(h * f)
l.m.value = m
l.n.value = n
}
},
u: {
l: {
style: 0,
ui: 0,
form: 0,
units: 0,
size: 0,
width: 0,
height: 0,
rotate: 0,
top: 0,
bottom: 0,
left: 0,
right: 0,
w: 0,
h: 0,
square: 0,
fill1: 0,
m: 0,
n: 0,
fill2: 0,
color: 0,
white: 0,
black: 0,
file: 0,
browse: 0,
name: 0,
preview: 0,
reset: 0,
print: 0,
page: 0,
content: 0
},
f: {
b: function (f, c) {
return function () {
var a = arguments, n = a.length, b = Array(n), i = 0
for (; i < n; ++i)
b[i] = a[i]
f.apply(c, b)
}
}
},
e: {
document: {
DOMContentLoaded: function () {
}
},
window: {
load: function () {
var a = this, l = a.u.l
a.p = l.units.value
if (l.size.value == '0') {
l.width.removeAttribute('readonly')
l.height.removeAttribute('readonly')
}
if (!l.square.checked)
l.h.removeAttribute('readonly')
}
},
ui: {
dragover: function (e) {
e.stopPropagation()
e.preventDefault()
e.dataTransfer.dropEffect = 'copy'
},
drop: function (e) {
e.stopPropagation()
e.preventDefault()
this.f.l(this, e.dataTransfer.files)
}
},
rotate: {
change: function () {
var l = this.u.l, v = l.width.value
l.width.value = l.height.value
l.height.value = v
v = l.top.value
if (l.rotate.checked) {
l.top.value = l.left.value
l.left.value = l.bottom.value
l.bottom.value = l.right.value
l.right.value = v
} else {
l.top.value = l.right.value
l.right.value = l.bottom.value
l.bottom.value = l.left.value
l.left.value = v
}
v = l.w.value
l.w.value = l.h.value
l.h.value = v
v = l.m.value
l.m.value = l.n.value
l.n.value = v
}
},
w: {
change: function (e) {
var l = this.u.l
if (l.square.checked)
l.h.value = e.target.value
}
},
square: {
change: function (e) {
var l = this.u.l
if (e.target.checked) {
l.h.setAttribute('readonly', '')
l.h.value = l.w.value
} else l.h.removeAttribute('readonly')
}
},
file: {
change: function (e) {
e.stopPropagation()
e.preventDefault()
this.f.l(this, e.target.files)
}
},
units: {
change: function () {
this.f.c(this)
}
},
size: {
change: function () {
this.f.c(this)
}
},
fill1: {
click: function () {
var l = this.u.l
if (l.form.reportValidity()) {
l.m.value = (l.width.value - l.left.value - l.right.value) / l.w.value | 0
l.n.value = (l.height.value - l.top.value - l.bottom.value) / l.h.value | 0
}
}
},
fill2: {
click: function () {
var l = this.u.l
if (l.form.reportValidity()) {
var w = (l.width.value - l.left.value - l.right.value) / l.m.value
, h = (l.height.value - l.top.value - l.bottom.value) / l.n.value
if (l.square.checked)
if (w < h) h = w
else w = h
l.w.value = w
l.h.value = h
}
}
},
white: {
click: function () {
this.u.l.color.value = '#ffffff'
}
},
black: {
click: function () {
this.u.l.color.value = '#000000'
}
},
browse: {
click: function () {
this.u.l.file.click()
}
},
reset: {
click: function () {
var l = this.u.l
l.width.setAttribute('readonly', '')
l.height.setAttribute('readonly', '')
l.content.innerHTML = l.style.innerHTML = ''
}
},
print: {
click: function () {
window.print()
}
},
form: {
submit: function (e) {
e.stopPropagation()
e.preventDefault()
var a = this, l = a.u.l, u = l.units.value
, width = l.width.value, height = l.height.value // page size
, mt = l.top.value, mb = l.bottom.value // margins
, ml = l.left.value, mr = l.right.value // margins
, w = l.w.value, h = l.h.value // width, height of cell
, m = l.m.value, n = l.n.value // width, height of grid
switch (u) {
case '1': // Inches
u = 'in'
break
case '2': // Centimeters
u = 'cm'
break
case '3': // Millimeters
default: // use Millimeters
u = 'mm'
}
l.style.innerHTML = '@page{size:' + width + u + ' ' + height + u
+ (l.rotate.checked ? ';landscape' : '')
+ '}@page{margin:' + mt + u + ' ' + mr + u + ' ' + mb + u + ' ' + ml + u
+ '}@media screen{#page{width:' + width + u + ';height:' + height + u
+ '}}#content{width:' + (width - ml - mr) + u + ';height:' + (height - mt - mb) + u
+ '}#grid>colgroup>col{min-width:' + w + u
+ '}#grid>tbody>tr{height:' + h + u
+ '}#grid,#grid>colgroup>col,#grid>tbody>tr{border-color:' + l.color.value
+ '}'
l.content.innerHTML = '<div id="box"><img alt="" id="image" src="' + a.z
+ '"><table id="grid"><colgroup>'
+ '<col>'.repeat(m) + '</colgroup>'
+ '<tr></tr>'.repeat(n)
+ '</table></div>'
}
}
},
i: function (p) {
var t = this, l = t.l, b = t.f.b, e = t.e, i, j, k
for (i in l)
l[i] = document.getElementById(l[i] || i)
l.window = window
l.document = document
for (i in e) {
k = e[i]
for (j in k)
l[i].addEventListener(j, b(k[j], p), 0)
}
}
},
i: function () {
var t = this
t.u.i(t)
}
}
))/*********************************************\
** Copyright © 2017-2019 Thejaka Maldeniya **
\*********************************************/
hr {
border: 1px solid #797;
}
table {
border-collapse: collapse;
}
h1 {
margin-top: 0;
font-size: x-large;
}
h3 {
margin-bottom: 0;
font-size: medium;
}
input, select, button {
margin: 1px;
padding: 1px 4px 2px;
}
input:not([type=checkbox]), select, button {
vertical-align: middle;
}
input[type=checkbox] {
margin-right: 5px;
}
label {
vertical-align: 1px;
}
input, select {
border: 1px solid #898;
background: #efe;
color: #353;
}
select {
padding: 0 0 1px;
}
input[readonly] {
background-color: #cdc;
}
input[type=file] {
display: none;
}
button {
border: 1px solid #898;
border-radius: 6px;
background: #bcb;
padding-right: 6px;
padding-left: 6px;
color: #353;
cursor: pointer;
}
button:hover {
border-color: #899;
background-color: #cdd;
color: #465;
}
.tt {
margin-left: 5px;
}
.tt td {
padding: 2px;
}
#ui {
border: 2px solid #8a8;
border-radius: 10px;
background: #cdc;
padding: 10px;
color: #575;
}
#name, #preview {
border: 1px solid #898;
padding: 5px;
}
#preview {
display: inline-block;
width: 256px;
}
#page, #content {
display: flex;
align-items: center;
justify-content: center;
}
#content {
overflow: hidden;
}
#box {
position: relative;
}
#image {
z-index: -1;
position: absolute;
width: 100%;
height: 100%;
object-position: center;
object-fit: contain;
}
#grid {
table-layout: fixed;
margin: auto;
border: 2px solid;
}
#grid > colgroup > col {
border-right: 1px solid;
}
#grid > colgroup > col:nth-child(10n) {
border-right-width: 2px;
}
#grid > tbody > tr {
border-bottom: 1px solid;
}
#grid > tbody > tr:nth-child(10n) {
border-bottom-width: 2px;
}
#footer {
margin-top: 20px;
border-top: 1px solid #797;
padding-top: 6px;
}
@media screen {
#page {
border: 1px solid #898;
}
}
@media print {
#ui {
display: none;
}
}<!DOCTYPE html>
<html>
<head>
<title>Cross-Stitch Image Generation Tool</title>
<meta charset="utf-8">
<style id="style"></style>
</head>
<body>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-142604605-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-142604605-1');
</script>
<div id="ui">
<h1>Cross-Stitch Image Generation Tool</h1>
<h3>For the most basic usage, Browse an image, then click Generate, then scroll down to view the image. Possibly only works in Firefox...</h3>
<br>
<form id="form">
<table class="tt">
<tr>
<td><label for="units">Units:</label></td>
<td>
<select id="units">
<option value="1">Inches</option>
<option value="2">Centimeters</option>
<option value="3" selected>Millimeters</option>
</select>
</td>
<td colspan="5"></td>
</tr>
<tr>
<td><label for="size">Page Size:</label></td>
<td>
<select id="size">
<option value="0">Custom</option>
<option value="1">Letter</option>
<option value="3">Legal</option>
<option value="6">A3</option>
<option value="7" selected>A4</option>
<option value="8">A5</option>
</select>
</td>
<td><label for="width">Width:</label></td>
<td><input id="width" type="text" required readonly pattern="\d+(.\d+)?" value="210"></td>
<td><label for="height">Height:</label></td>
<td><input id="height" type="text" required readonly pattern="\d+(.\d+)?" value="297"></td>
<td><input id="rotate" type="checkbox"><label for="rotate">Rotate</label></td>
</tr>
</table>
<h3>Margins</h3>
<table class="tt">
<tr>
<td><label for="top">Top:</label></td>
<td><input id="top" type="text" required pattern="\d+(.\d+)?" value="10"></td>
<td><label for="bottom">Bottom:</label></td>
<td><input id="bottom" type="text" required pattern="\d+(.\d+)?" value="10"></td>
</tr>
<tr>
<td><label for="left">Left:</label></td>
<td><input id="left" type="text" required pattern="\d+(.\d+)?" value="10"></td>
<td><label for="right">Right:</label></td>
<td><input id="right" type="text" required pattern="\d+(.\d+)?" value="10"></td>
</tr>
</table>
<h3>Grid</h3>
<table class="tt">
<tr>
<td><label for="w">Cell Width:</label></td>
<td><input id="w" type="text" required pattern="\d+(.\d+)?" value="2"></td>
<td><label for="h">Cell Height:</label></td>
<td><input id="h" type="text" required readonly pattern="\d+(.\d+)?" value="2"></td>
<td><input id="square" type="checkbox" checked><label for="rotate">Same (Square)</label></td>
<td><button id="fill1" type="button">Fill Page</button></td>
</tr>
<tr>
<td><label for="m">Grid Width (cells):</label></td>
<td><input id="m" type="text" required pattern="\d+" value="90"></td>
<td><label for="n">Grid Height (cells):</label></td>
<td><input id="n" type="text" required pattern="\d+" value="130"></td>
<td></td>
<td><button id="fill2" type="button">Fill Page</button></td>
</tr>
<tr>
<td><label for="color">Grid Color:</label></td>
<td>
<input id="color" type="color" value="#ffffff">
<button id="white" type="button">White</button>
<button id="black" type="button">Black</button>
</td>
<td colspan="4"></td>
</tr>
</table>
<h3>Image</h3>
<input id="file" type="file">
<table class="tt">
<tr>
<td><button id="browse" type="button">Browse</button></td>
<td><div id="name">(Select an image)</div></td>
</tr>
<tr>
<td></td>
<td><img id="preview" alt="(No Preview)" src="#"></td>
</tr>
</table>
<br>
<button id="generate">Generate</button>
<button id="reset" type="reset">Reset</button>
<button id="print" type="button">Print</button>
</form>
<div id="footer">
© 2017-2019 Thejaka Maldeniya. All rights reserved.
</div>
</div>
<div id="page">
<div id="content"></div>
</div>
</body>
</html>Upvotes: 2
Views: 300
Answers (1)
Thejaka Maldeniya
Reputation: 1076
Reducing the code pointed me in the direction of how to solve the core problem. Turns out I had omitted the tds because FF Desktop didn't require them, to reduce the size of the generated code. At the time I wrote this, I was optimizing just for FF Desktop as per requirements. Adding empty tds seems to solve the core issue. (Only tested in Edge, so far...)
/*********************************************\
** Copyright © 2017-2019 Thejaka Maldeniya **
\*********************************************/
'use strict';
(function (a) {
a.i()
}(
{
z: 0, // image file data URL
p: '3', // previous value of units (default: Millimeters)
f: { // functions
_: function (l, e, h) { l.addEventListener(e, h, 0) },
l: function (a, f) { // load files
if (f.length) {
f = f[0]
var l = a.u.l, r = new FileReader()
l.name.innerHTML = f.name
a.f._(r, 'loadend', function (e) {
l.preview.src = a.z = e.target.result
})
r.readAsDataURL(f)
}
},
r: function (x) { // round to 3 decimal places
return Math.round(x * 1000) / 1000
},
f: function (a, b) { // get conversion factor
var f = 0
if (a == b) f = 1
else {
// if either a or b is not known, factor will be 0
// first, convert to Millimeters
switch (a) { // previous units value
case '1': // Inches
f = 25.4
break
case '2': // Centimeters
f = 10
break
case '3': // Millimeters
f = 1
}
// second, convert from Millimeters
switch (b) { // new units value
case '1': // Inches
f /= 25.4
break
case '2': // Centimeters
f /= 10
break
case '3': // Millimeters
// no change
}
}
return f
},
c: function () { // units or size value changed
var t = this, l = a.u.l
, r = t.r // round function
, width = l.width.value, height = l.height.value // A4
, mt = l.top.value, mb = l.bottom.value, ml = l.left.value, mr = l.right.value // margins
, w = l.w.value, h = l.h.value // width, height of cell
, m = l.m.value, n = l.n.value // width, height of grid
, s = 'A4' // paper size
, f = t.f(a.p, a.p = l.units.value) // unit conversion factor
, g = t.f('3', l.units.value) // unit conversion factor for default values (currently in Millimeters)
l.width.setAttribute('readonly', '')
l.height.setAttribute('readonly', '')
switch (l.size.value) {
case '0': // Custom
l.width.removeAttribute('readonly')
l.height.removeAttribute('readonly')
g = f
break
case '1': // Letter
width = 216
height = 279
l.rotate.checked = 0
s = 'Letter'
break
case '3': // Legal
width = 216
height = 356
l.rotate.checked = 0
s = 'Legal'
break
case '6': // A3
width = 297
height = 420
l.rotate.checked = 0
s = 'A3'
break
case '7': // A4
width = 210
height = 297
l.rotate.checked = 0
s = 'A4'
break
case '8': // A5
width = 148
height = 210
l.rotate.checked = 0
s = 'A5'
}
l.width.value = r(width * g)
l.height.value = r(height * g)
l.top.value = r(mt * f)
l.bottom.value = r(mb * f)
l.left.value = r(ml * f)
l.right.value = r(mr * f)
l.w.value = r(w * f)
l.h.value = r(h * f)
l.m.value = m
l.n.value = n
}
},
u: {
l: {
style: 0,
ui: 0,
form: 0,
units: 0,
size: 0,
width: 0,
height: 0,
rotate: 0,
top: 0,
bottom: 0,
left: 0,
right: 0,
w: 0,
h: 0,
square: 0,
fill1: 0,
m: 0,
n: 0,
fill2: 0,
color: 0,
white: 0,
black: 0,
file: 0,
browse: 0,
name: 0,
preview: 0,
reset: 0,
print: 0,
page: 0,
content: 0
},
f: {
b: function (f, c) {
return function () {
var a = arguments, n = a.length, b = Array(n), i = 0
for (; i < n; ++i)
b[i] = a[i]
f.apply(c, b)
}
}
},
e: {
document: {
DOMContentLoaded: function () {
}
},
window: {
load: function () {
var a = this, l = a.u.l
a.p = l.units.value
if (l.size.value == '0') {
l.width.removeAttribute('readonly')
l.height.removeAttribute('readonly')
}
if (!l.square.checked)
l.h.removeAttribute('readonly')
}
},
ui: {
dragover: function (e) {
e.stopPropagation()
e.preventDefault()
e.dataTransfer.dropEffect = 'copy'
},
drop: function (e) {
e.stopPropagation()
e.preventDefault()
this.f.l(this, e.dataTransfer.files)
}
},
rotate: {
change: function () {
var l = this.u.l, v = l.width.value
l.width.value = l.height.value
l.height.value = v
v = l.top.value
if (l.rotate.checked) {
l.top.value = l.left.value
l.left.value = l.bottom.value
l.bottom.value = l.right.value
l.right.value = v
} else {
l.top.value = l.right.value
l.right.value = l.bottom.value
l.bottom.value = l.left.value
l.left.value = v
}
v = l.w.value
l.w.value = l.h.value
l.h.value = v
v = l.m.value
l.m.value = l.n.value
l.n.value = v
}
},
w: {
change: function (e) {
var l = this.u.l
if (l.square.checked)
l.h.value = e.target.value
}
},
square: {
change: function (e) {
var l = this.u.l
if (e.target.checked) {
l.h.setAttribute('readonly', '')
l.h.value = l.w.value
} else l.h.removeAttribute('readonly')
}
},
file: {
change: function (e) {
e.stopPropagation()
e.preventDefault()
this.f.l(this, e.target.files)
}
},
units: {
change: function () {
this.f.c(this)
}
},
size: {
change: function () {
this.f.c(this)
}
},
fill1: {
click: function () {
var l = this.u.l
if (l.form.reportValidity()) {
l.m.value = (l.width.value - l.left.value - l.right.value) / l.w.value | 0
l.n.value = (l.height.value - l.top.value - l.bottom.value) / l.h.value | 0
}
}
},
fill2: {
click: function () {
var l = this.u.l
if (l.form.reportValidity()) {
var w = (l.width.value - l.left.value - l.right.value) / l.m.value
, h = (l.height.value - l.top.value - l.bottom.value) / l.n.value
if (l.square.checked)
if (w < h) h = w
else w = h
l.w.value = w
l.h.value = h
}
}
},
white: {
click: function () {
this.u.l.color.value = '#ffffff'
}
},
black: {
click: function () {
this.u.l.color.value = '#000000'
}
},
browse: {
click: function () {
this.u.l.file.click()
}
},
reset: {
click: function () {
var l = this.u.l
l.width.setAttribute('readonly', '')
l.height.setAttribute('readonly', '')
l.content.innerHTML = l.style.innerHTML = ''
}
},
print: {
click: function () {
window.print()
}
},
form: {
submit: function (e) {
e.stopPropagation()
e.preventDefault()
var a = this, l = a.u.l, u = l.units.value
, width = l.width.value, height = l.height.value // page size
, mt = l.top.value, mb = l.bottom.value // margins
, ml = l.left.value, mr = l.right.value // margins
, w = l.w.value, h = l.h.value // width, height of cell
, m = l.m.value, n = l.n.value // width, height of grid
switch (u) {
case '1': // Inches
u = 'in'
break
case '2': // Centimeters
u = 'cm'
break
case '3': // Millimeters
default: // use Millimeters
u = 'mm'
}
l.style.innerHTML = '@page{size:' + width + u + ' ' + height + u
+ (l.rotate.checked ? ';landscape' : '')
+ '}@page{margin:' + mt + u + ' ' + mr + u + ' ' + mb + u + ' ' + ml + u
+ '}@media screen{#page{width:' + width + u + ';height:' + height + u
+ '}}#content{width:' + (width - ml - mr) + u + ';height:' + (height - mt - mb) + u
+ '}#grid>colgroup>col{min-width:' + w + u
+ '}#grid>tbody>tr{height:' + h + u
+ '}#grid,#grid>colgroup>col,#grid>tbody>tr{border-color:' + l.color.value
+ '}'
l.content.innerHTML = '<div id="box"><img alt="" id="image" src="' + a.z
+ '"><table id="grid"><colgroup>'
+ '<col>'.repeat(m) + '</colgroup>'
+ ('<tr>' + '<td></td>'.repeat(m) + '</tr>').repeat(n)
+ '</table></div>'
}
}
},
i: function (p) {
var t = this, l = t.l, b = t.f.b, e = t.e, i, j, k
for (i in l)
l[i] = document.getElementById(l[i] || i)
l.window = window
l.document = document
for (i in e) {
k = e[i]
for (j in k)
l[i].addEventListener(j, b(k[j], p), 0)
}
}
},
i: function () {
var t = this
t.u.i(t)
}
}
))
Upvotes: 2
Related Questions
- Website renders differently in different browsers
- Rendering issue with firefox
- Big discrepancy between firefox and chrome rendering
- Firefox rendering differently than Safari/Chrome
- Display differences between Firefox and Chrome/IE
- CSS rendered differently in chrome vs firefox
- result totally different using chrome and firefox 10.2
- Webpage rendering very differently on different browsers
- Rendering Differences in FF IE and Chrome
- Why does this render differently between Chrome & Firefox 3.6?