Safari Div Problem

[sfuchs0@hotmail]

My portfolio is online at http://users.design.ucla.edu/~sfuchs/
For some reason, the div's, which are positioned absolutely, get completely messed up when I open the page with Safari. Does anybody know how to fix this? Here's the CSS:

#page {
position: absolute;
background: url(bg/diag.gif);
width: 812px;
height: 446px;
}



.draggable {
background: url(orig/1.png);
position: absolute;
top: 27px;
left: 37px;
width: 546px;
height: 320px;
border: 0px solid white;
}

.draggable2 {
background: url(orig/2.png);
position: absolute;
top: 354px;
left: 37px;
width: 546px;
height: 18px;
border: 0px solid white;
}

.draggable3 {
position: absolute;
top: 378px;
left: 37px;
width: 546px;
height: 44px;
border: 0px solid white;
}

.draggable4 {
position: absolute;
top: 27px;
left: 604px;
width: 190px;
height: 17px;
border: 0px solid white;
}

.draggable5 {
background: url(orig/5.png);
position: absolute;
top: 51px;
overflow:auto;
left: 604px;
width: 190px;
height: 315px;
border: 0px solid white;
overflow:hidden;
}


.draggable6 {
background: url(orig/6.png);
position: absolute;
top: 394px;
left: 604px;
width: 190px;
height: 27px;
border: 0px solid white;
}







* html .draggable6
{
background-image: none;
filter: progidXImageTransform.Microsoft.AlphaImageLoader(src="orig/6.png");
}




Once again, the URL is
http://users.design.ucla.edu/~sfuchs/
thank you so much!

 

[Oryan]

I noticed you're using the Prototype-Windows AJAX/Javascript library. I've been trying to use it with only moderate success on a project at work, but I've never used it with Safari. I'm going to be dealing with it tomorrow so I'll let you know if I have any insights. I have a feeling the issue is with the javascript and not the CSS, btw.

 

[sfuchs0@hotmail]

Hey, friends, thank you for your help... I had to compromise, and remove some javascript, thus disabling the drag-effect of the boxes. Does anyone know why this code would mess up safari? It can be found here:
http://users.design.ucla.edu/~sfuchs/js/scriptaculous.js



var Scriptaculous = {
Version: '1.5.3',
require: function(libraryName) {
// inserting via DOM fails in Safari 2.0, so brute force approach
document.write('<script type="text/javascript" src="'+libraryName+'"></script>');
},
load: function() {
if((typeof Prototype=='undefined') ||
parseFloat(Prototype.Version.split(".")[0] + "." +
Prototype.Version.split(".")[1]) < 1.4)
throw("script.aculo.us requires the Prototype JavaScript framework >= 1.4.0");

$A(document.getElementsByTagName("script")).findAll( function(s) {
return (s.src && s.src.match(/scriptaculous\.js(\?.*)?$/))
}).each( function(s) {
var path = s.src.replace(/scriptaculous\.js(\?.*)?$/,'');
var includes = s.src.match(/\?.*load=([a-z,]*)/);
(includes ? includes[1] : 'builder,effects,dragdrop,controls,slider').split(',').each(
function(include) { Scriptaculous.require(path+include+'.js') });
});
}
}

Scriptaculous.load();