Forum Moderators: open
/*CSS*/
#wrapper {
width: 900px;
margin-top: 0px;
margin-left: 0px;
margin-bottom: 0px;
position: relative;
}
/*JAVASCRIPT*/
/*DETERMINE BROWSER*/
var browser = navigator.appName;
var b_version = navigator.appVersion;
var aol = b_version.search("America Online Browser");
var safari = b_version.search("Safari");
if ((browser == "Microsoft Internet Explorer") && (aol < 0)) {
var browser = "ie";
}
else if ((browser == "Microsoft Internet Explorer") && (aol > 0)) {
var browser = "aol";
}
else if (browser == "Opera") {
var browser = "opera";
}
else if ((browser == "Netscape") && (safari < 0)) {
var browser = "firefox";
}
else if ((browser == "Netscape") && (safari > 0)) {
var browser = "safari";
}
/*DETERMINE WINDOW WIDTH*/
function findLivePageWidth() {
if (window.innerWidth) {
return window.innerWidth;
}
if (document.body.clientWidth) {
return document.body.clientWidth;
}
return (null);
}
var livePageWidth = findLivePageWidth();
var test = livePageWidth % 2;
if (test == 1) {
var width = "odd";
}
else {
var width = "even";
}
/*ADJUST ALIGNMENT*/
var objectID = "wrapper";
var CSSProp = "margin-left";
var newVal = (((livePageWidth / 2) - 450) + 1) + "px";
function marginAdj(objectID, CSSProp, newVal) {
if ((browser == "ie" ¦¦ "aol" ¦¦ "safari") && (width == "odd")) {
var object = document.getElementById(objectID);
object.style[CSSProp] = newVal;
}
}
/*HTML*/
<body onload="marginAdj(objectID, CSSProp, newVal);">
move this block inside marginAdj that becomes marginAdj()
var livePageWidth = findLivePageWidth();
var test = livePageWidth % 2;
if (test == 1) {
var width = "odd";
}
else {
var width = "even";
}
/*ADJUST ALIGNMENT*/
var objectID = "wrapper";
var CSSProp = "margin-left";
var newVal = (((livePageWidth / 2) - 450) + 1) + "px";
The tricky part is that each browser handles this situation differently.
And will continue to do so as new browsers come out, almost monthly. To repeat the downtrodden mantra, if Javascript is disabled this won't work anyway. Rather than duct taping it with a solution that is going to be a thorn in your site from this day forward, are you absolutely positive sure you can't solve it with a change in your layout methods?
Valid doctype [webmasterworld.com]?
Pages validate [validator.w3.org], the combination of these two causing it to render in standards mode as opposed to quirks mode?
