calculations

off-screen extremes, using absolute positioning.

chaotic test page
#07
23.mar.2005
rev: 24.oct.2005

how far outside the body can we "go"?

adding 'overflow: hidden' to equally styled elements

horizontal green {
position: absolute; 
width: 10200px;
left: -10000px;

horizontal white {
position: absolute; 
width: 31900px;
left: -31500px;
}
horizontal red {
position: absolute; 
width: 1000400px;
left: -1000000px;
}

vertical green {
position: absolute; 
height: 10200px;
top: -10000px;
}
vertical white {
position: absolute; 
height: 31900px;
top: -31700px;
}
vertical red {
position: absolute; 
height: 100000200px;
top: -100000000px;
}


Notes:

Establishing how much we have to go on when we want something to stay "off-screen". Nothing can really go "off-screen", just be kept out of view. It's all about the end-result from those calculations...

The  RED  horizontal and vertical bars are stretched so far out that some browsers are bound to fail, just to see that there are limitations. Not a big deal if some browsers can't calculate those, but nice if they can though.

The  WHITE  horizontal and vertical bars are just within limits in some browsers. The values are drawn from a 2 byte integer divided by 2, which is logical.

The  GREEN  horizontal and vertical bars are set at safe values, +/-10000px. That's low enough values even for the most tricky or flawed integer-based calculator.

Results:

- Safari: OK.

- IE6: OK.

- Opera: OK, but horizontal  RED  lost (too wide).

- Moz/FF: OK, but vertical  RED  lost (too tall).

- IE5.0(win): OK, but extremely slow on calculations.

- IE5.2(Mac): OK, but horizontal and vertical  RED  flawed (too wide and too tall).

Conclusion: none of these browsers will have problems with normal "off-screen" styling, using position: absolute. I think most browsers base their calculations on 2 and 4 bytes integers, but I'm not sure. IE/win looked a bit "floating" if I stretched it too far, but that isn't included in this test-page. Anyway, they all can reach far enough for normal web design.

tested browsers:

Opera:
win2K: 7.22, 7.50, 7.54, 8.50
win2K: 9.0 preview 1
Mac OS-X: 7.54
Moz:
win2K: 1.4, 1.7.2
FF:
win2K: (0.6), 0.8, 1.0, 1.5b1
Mac OS-X: 1.0
Safari:
Mac OS-X: 1.2.4
IE:
win2K: 5.0, 6.0
Mac OS-X: 5.2
Netscape (Moz):
win2K: 7.2(Moz 1.7.2)

rev: 24.oct.2005: added 'html {display: table-cell;}' as a fix for Opera's lack of scrollbar on this testpage. Looks like a trouble-free fix.

go to test-menu