SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Feb 2004
    Location
    NC
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Problems with X library and Safari

    Ok so I am working on a two column CSS layout, and I have resorted to using the x 3.14.1 library and the code below to keep the two columns the same height so I can put a footer at the bottom without issue.

    function adjustLayout()
    {
    // Get natural heights
    var lheight = xHeight("leftSide");
    var rheight = xHeight("rightSide");

    // Find the maximum height
    var maxheight = Math.max(lheight, rheight);

    // Assign maximum height to all columns
    xHeight("leftSide", maxheight);
    xHeight("rightSide", maxheight);


    }

    This functionality works in IE 5/5.5/6, Firebird, Mozilla, Netscape 7, IE5 Mac and Opera 7. However for some reason it just seems to be ignored by Safari (1.1 and 1.2). Is there some major difference or piece I am leaving out? I was under the impression that Safari was DOM standards compliant. Hopefully I will finally be getting upgraded to OSX tomorrow so I can actually debug this myself.

    Any ideas until then?

    Thanks, Tyler

  2. #2
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Tyler, thanks for using X!

    and Welcome to SitePoint Forums!

    I don't have access to a machine with Safari, so I'm afraid I don't have any suggestions.

    Is the page online, so we can see the rest of it?

  3. #3
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    When you get a chance to debug on Safari, it would be interesting to see the result of the following. Try it with a valid xhtml doctype - then try it with no doctype.
    Code:
    window.onload = function()
    {
      if(xDef(document.defaultView) && xDef(document.defaultView.getComputedStyle)){
        alert('DOM');
      }
      else if(xDef(ele.currentStyle,document.compatMode)){
        alert('IE');
      }
      else if(xDef(ele.offsetHeight)){
        alert('IE4');
      }
    }
    function xDef()
    {
      for(var i=0; i<arguments.length; ++i){if(typeof(arguments[i])=='undefined') return false;}
      return true;
    }

  4. #4
    SitePoint Member
    Join Date
    Feb 2004
    Location
    NC
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Unfortunately I don't have direct access to Safari either (damn slow IT dept). I will give your code a shot when I get access, and I will see if I can get cleared to post a link to the page directly so you can get a better idea of what's going on with it.

    Basically the page loads exactly as in Netscape 7/Firebird/Opera except it doesn't execute the xHeight calls to resize the div's.

    Thanks Mike

  5. #5
    SitePoint Member
    Join Date
    Feb 2004
    Location
    NC
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok finally got OSX this afternoon. Here is the skinny and the link to the page:

    http://www.ncpublicschools2.org/test...late/test.html

    I am using the adjustLayout function in x.js to resize the columns. I added an alert box to show the reported xheight for the left and right columns.

    in windows, they show as Right: 545px, Left: 619px;

    in safari 1.1 on the mac they show as Left: 180px, Right: 509px.

    The script you supplied above returned with the 'IE4' alert box.

    So apparently safari is missing a LOT of the actual height, but I havent debugged it at all yet to see where its missing everything.

  6. #6
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi noen, I have a few suggestions...
    • I suggest not putting your application code in the x.js library file. Put your application code in it's own file - especially if you plan to license your code other than LGPL.
    • There are 3 garbage characters at the beginning of the file. That might cause subtle problems in some browsers.
    • I suggest adding event listeners as one of the last things done in window.onload. You don't want the listener to be called before you finish the inital setup.
    • You're calling adjustLayout at the end of the file, and also in window.onload. The script element at the end of the file is not needed. (I have a feeling you know this - perhaps you were just experimenting)
    • The leftside and rightside elements probably should have "overflow:hidden" in their css.
    • The code you're using began life in one of Kevin's TechTimes articles. It might be helpful to compare his html structure with yours.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •