Not signed in (Sign In)

SkillShare - A place to discuss Web Standards and Web Design topics

Categories

Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.

    • CommentAuthorsfuchs
    • CommentTimeJun 25th 2006
     permalink
    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");
    }
  1.  permalink
    Hi!
    For starting I don't get this drag and drop deal you have. It doesn't make any sense to me to use it here. Also I don't see any reason for using Image Maps here and table in a right column.
    About you Safari problem.(by the way it's broken in Opera as well)
    When you position you div absolutly you need to take it out from a Page div.
    So in order to work it correclty in Safari it shoud be this way.
    <DIV class=draggable5 id=mainFrame5></div>
    <DIV id=page>
    </div>

    This is quick fix for you problem otherwise you have to redo yours CSS file.

    Cheers, DS
    • CommentAuthorsfuchs
    • CommentTimeJun 27th 2006
     permalink
    Hey, friends, thank you for your help... I had to compromise, and removed some javascript, thus disabling the drag-effect of the boxes. Perhaps youre right, it's not necessary. Also, whats the problem with image maps? I find them easier to make... do you mean they cause problems for the users?Thanks

    Also, 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();
Add your comments
    Username Password
  • Format comments as (Help)