SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Zealot
    Join Date
    Dec 2005
    Posts
    191
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Liquid Layout JS & CSS / Prob on Safari

    This liquid layout works on pc but on a mac it completely splits as if the javascript isn't being read, but only in safari, it is fine in firefox and i don't know about ie mac but don't care.

    I seem to remember someone telling me macs read javascript slightly differently, could this be the reason?

    Here are the main css statement which control the widths hope one of you guys can point us in the right direction:

    -------------------------------------------------

    .pageContainer{
    min-width: 800px; max-width: 905px;
    width:expression(document.body.clientWidth < 800 ? "800px" : document.body.clientWidth > 905 ? "905px" : "auto");
    }

    -------------------------------------------------

    .mainContent{
    padding: 0px 20px 10px 17px;
    min-width: 480px; max-width: 645px;
    width:expression(document.body.clientWidth < 800 ? "480px" : document.body.clientWidth > 905 ? "645px" : document.body.clientWidth - 260);
    }

    .adsContainer{ width: 120px; min-width: 120px; max-width: 120px;}

    -------------------------------------------------

    .mainContentNoAds{
    padding: 0px 0px 10px 17px;
    min-width: 660px; max-width: 765px;
    width:expression(document.body.clientWidth < 800 ? "660px" : document.body.clientWidth > 905 ? "765px" : document.body.clientWidth - 140);
    }

  2. #2
    Non-Member Egor's Avatar
    Join Date
    Jan 2004
    Location
    Melbourne, Australia
    Posts
    7,305
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Err, as far as I know those Javascript expressions only work in MSIE (Win).

    Maybe the width after min/max-width is throwing Safari off? Have you tried moving the hackish invalid fixes into a separate IE-only style-sheet?

    You don't need the JS for all other modern browsers anyway.

  3. #3
    SitePoint Zealot
    Join Date
    Dec 2005
    Posts
    191
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yea sorry mate your exactly right its a friends site and i said i'd look into how to fix it so im not too familiar with the setup:

    the javascript controls the site in ie.

    on pc i remove the script and it works in opera, firefox and netscape just as it does with the script there.

    there is no change in safari

    for some reason i have the css open in dreamweaver and theres an error line below the min-width and max-width properties? I think this may be due to support issues with ie 5.5 and 6 but it says nothing about safari and i've heard safari supports these attributes?

    any more ideas on "types of things" to look for or change please?

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Older safari doesn't support min or max-width and there are some caveats with positioned elements.

    http://developer.apple.com/internet/...afari_css.html

  5. #5
    SitePoint Zealot
    Join Date
    Dec 2005
    Posts
    191
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yea cheers for that link it'll come in useful.

    its not to do with that the browser version because ive made a mock up test and the min width and max widths are working fine with a tested div.

    the main problem is the sites got some crazy table nesting thing and that would be a way too big change to remake to css / divs. ill just have to break it down and see what the problem is

    thanks

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    ill just have to break it down and see what the problem is
    Yes you'll have to strip it down until it works and then see if you can identify the problem area. If you keep cutting out chunks of code logically you can usually spot the problem quite quickly.

    Fixing it once you've found it though is another matter Good Luck.

    I don't have safari so I can't really offer much help other than the usual known bugs.

  7. #7
    SitePoint Zealot
    Join Date
    Dec 2005
    Posts
    191
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yea cheers for the good words and advice,

    all be it im quite efficient at breaking it down and finding the problems because i do it so much!!

    Found what it is, in pc browsers it seems to accept the class attributes in a

    <table cellpadding="0" cellspacing="0" border="0" width="100%" class="pageContainer">

    whereas in safari it doesn't like this so i surrounded the table with a

    <div class="pageContainer">
    <table cellpadding="0" cellspacing="0" border="0" width="100%">

    and it nows works all around!!!
    Solution!

    Any comments on that?
    As i said its not my site and its quite table heavy so..

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Interesting - thanks for showing the solution

    I'm guessing than safari won't allow min-widths on tables but will apply it on a parent div.


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
  •