And so I cobbled together some javascript for him that basically overrides the background positioning and centers it manually via javascript. Like so:
function positionBackground(){
//set this to the width of your background image
var backgroundImageWidth = 760;
var size = getPageSize();
var body = document.body;
if( navigator.userAgent.indexOf('Safari') != -1 || navigator.appVersion.indexOf("MSIE") != -1)
{
if(size.width % 2 == 1){
size.width -= 1;
}
}
body.style.backgroundPosition = size.width/2 - (backgroundImageWidth / 2);
}
function getPageSize() {
var myWidth = 0, myHeight = 0;
if( typeof( window.innerWidth ) == 'number' ) {
//Non-IE
myWidth = window.innerWidth;
myHeight = window.innerHeight;
} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
//IE 6+ in 'standards compliant mode'
myWidth = document.documentElement.clientWidth;
myHeight = document.documentElement.clientHeight;
} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
//IE 4 compatible
myWidth = document.body.clientWidth;
myHeight = document.body.clientHeight;
}
return {width:myWidth,height:myHeight};
}
window.onresize = positionBackground;
window.onload = positionBackground;
Unfortunately you're required to input the background image's width by hand, but since this is usually consistent I think its acceptable.
Alas, I'm really unsure that this is a better way of thinking about how to fix things. It really bothers me that the current mentality for rigorous CSS and tableless layouts requires such elaborate javascript fixes to get them to work. But that is a topic for another rant. :)
8 comments:
I used a similar technique at first, but I had to change the background position on multiple elements to get it working, which made the script huge, slowed down the page a bit, and produced a strange white flash when the javascript kicked in and the elements re-drew.
Forcing the browser into an even width isn't really that noticible as its only shifting 1px. It's certainly a hack, but I consider it to be a decent one - the code is generalized, so it works on any site, and it runs quite quickly.
Anywho - it's cool to see others solutions to the problem.
what about people who surf browser maximized... doesn't that knock them out?
Rob - Safari doesn't maximize to full screen like windows apps. Shrinking by 1px isn't that noticible even at full screen width
This is an IE/Windows problem too though. I don't think a solution to this problem can be resizing peoples windows.
Also, you said you had to change the background on multiple elements. Does Safari also have centering problems with DIV backgrounds? The only centering problem I've seen in IE seems to be on the body element alone.
The javascript works great, good hack. But why not try a CSS property tweak?
Instead of using "center" for the positioning of the bg img, use percentages. e.g., "top center no-repeat" becomes "50% 0 no-repeat"
CSS reference for BG pos as follows
keyword: y-axis x-axis
percent: x% y%
Worked for me! Check out my site (in Safari). The header and bg imgs are positioned with 50%.
This is cross-commented at robgoodlatte's blog.
I think this issue is for backgrounds on td elements only. try changing your td's do div's where the background image is concerned.
Even better, just use an image with an even number of pixels. Seemed to do the trick for me.
Here's what worked for me to fix the 1px Safari CSS problem:
http://philfreo.com/blog/fixing-safaris-1px-background-image-centering-problem/
Post a Comment