So I've been putting together my new site layout, and since I cannot find a feasible way to make a div vertically extend the full height of a variable length window, I have added the following to give the impression that the div with the same background fills the page.

body {
margin: 0 auto;
background-image: url(images/tk_main_bg.jpg);
background-repeat:repeat-y;
background-position:center; /*--I've also tried 50% here, to no avail--*/

While this looks great in every other browser I have tried, Safari offsets the background by several pixels, ruining the illusion of fluidity. See here:
http://www.taokore.com/images/screen_01.png
or view the link below in Safari.

Notice how on the bottom left the background is shifted to the right underneath the content div. For an example of how it should look, view this page in FF, IE, or Opera:
http://www.taokore.com/config.php

Any suggestions? :P

Pretty simple, actually. All you need to do is put some more padding, or margin, in the safari version. I got this code off of a website, so no doubt you could take a lot of it out.

JavaScript

<script type="text/javascript">

var css_browser_selector = function() {var ua=navigator.userAgent.toLowerCase(),is=function(t){return ua.indexOf(t) != -1;},h=document.getElementsByTagName('html')[0],b=(!(/opera|webtv/i.test(ua))&&/msie\s(\d)/.test(ua))?('ie ie'+RegExp.$1):is('firefox/2')?'gecko ff2':is('firefox/3')?'gecko ff3':is('gecko/')?'gecko':is('opera/9')?'opera opera9':/opera\s(\d)/.test(ua)?'opera opera'+RegExp.$1:is('konqueror')?'konqueror':is('chrome')?'chrome webkit safari':is('applewebkit/')?'webkit safari':is('mozilla/')?'gecko':'',os=(is('x11')||is('linux'))?' linux':is('mac')?' mac':is('win')?' win':'';var c=b+os+' js'; h.className += h.className?' '+c:c;}();

</script>

CSS

/*this is how it is normally */
#detection { 
height: 20px; 
background: #8C8C8C;
}
/*this is the special version */
.safari #detection {
height: 400px;
}

And, of course, the html code:

<p id="detection">
Detect this.
</p>

Hope it helps!
- Steve

You need to get rid of all that positioning, nested position:absolutes is just ASKING for trouble - and it's utterly unnecessary.

Use the normal document flow with floats and margins to get things where you want them. Check the stickies for methods to achieve 100% height, and check out the faux columns method (which you've sort of implemented already).

Thanks for the feedback. I would like to avoid having to use java, as this seems unnecessary, but I will consider it as a last alternative. I have also already tried to use float and make things naturally flow, without much success, but I will do some more research and see what I can do. That seems to make the most sense to me as well, despite my failed efforts. Thanks again!