Safari Div Problem

Discussion in 'Web Design and Development' started by sfuchs0@hotmail, Jun 25, 2006.

  1. sfuchs0@hotmail macrumors newbie

    Joined:
    Jun 25, 2006
    #1
    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: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="orig/6.png");
    }




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

    Oryan

    Joined:
    Apr 1, 2005
    Location:
    Lincoln, NE
    #2
    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.
     
  3. sfuchs0@hotmail thread starter macrumors newbie

    Joined:
    Jun 25, 2006
    #3
    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();
     

Share This Page