#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2010
    Posts
    2
    Rep Power
    0

    Site with huge gaps under safari


    hello all,
    i'am at complete loss for now. my site promodivin uses mootools to enrich it by adding slides and accordeon effects.
    Works great with IE and FF but using Safari it displays huge blank sections. My text's gone. It's even clearer on the 'Services' tab where I can see some narrow sections. To make the effects work, you may click on the headers and it should collapse the appropriate section.
    I believe the issue stems from the ids used only for the purpose of mootools.
    Here's an html exerpt from the frontpage:
    Code:
    <div id="h_toggle1"><a href="#">
    <h1>Communication</h1>
    </a></div>
    <div id="horizontal_slide1">
    <ul class="bullet_point">
    ...

    and the titre_toggle.css describing the elements used.
    Code:
    h3.section {
    margin-top: 1em;
    }
    
    #vertical_slide1, #horizontal_slide1,
    #vertical_slide2, #horizontal_slide2,
    #vertical_slide3, #horizontal_slide3 {
    background: #E6EAEF;
    margin-top: 0;
    padding: 10px 10px 0 10px;
    border: 1px solid #D5D8DD;
    }
    
    #h_toggle1, #h_toggle3, #h_toggle2 {
    }
    
    div.marginbottom {
    /* Since the Fx.Slide element resets margins, we set a margin on the above element */
    margin-bottom: 10px;
    }
    I'll appreciate any insight.

    safari 4.0.3 --> KO
    IE 6+ --> OK
    FF 3.5 --> OK
    mootools 1.2.4
    joomla 1.5.15
    Last edited by Kravvitz; January 20th, 2010 at 10:35 AM. Reason: fixed the code tags
  2. #2
  3. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4309
    Welcome to DevShed Forums, lenarque.

    It looks like Safari (and other WebKit browsers) don't like the overflow:hidden being applied to the element. The solution is to specify the hideOverflow option to prevent the overflow property being set.

    So for example, change
    Code:
    var myVerticalSlide3 = new Fx.Slide('vertical_slide3');
    to
    Code:
    var myVerticalSlide3 = new Fx.Slide('vertical_slide3', {hideOverflow:false});
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2010
    Posts
    2
    Rep Power
    0
    Originally Posted by Kravvitz
    Welcome to DevShed Forums, lenarque.

    It looks like Safari (and other WebKit browsers) don't like the overflow:hidden being applied to the element. The solution is to specify the hideOverflow option to prevent the overflow property being set.

    So for example, change
    Code:
    var myVerticalSlide3 = new Fx.Slide('vertical_slide3');
    to
    Code:
    var myVerticalSlide3 = new Fx.Slide('vertical_slide3', {hideOverflow:false});
    Thank you Kravvitz .
    This is a good suggestion although I tell you I am baffled that something as essential as overflow:hidden does not work with the Webkit engine.
    Now, here the issues after the suggested change
    • the text shows up only for the vertical slide It is not working for Horizontal slide

    • the H slide is far from optimal as it pushes the text up instead of hidding it say, under the header

    • i need to retrofit the code to make it fit right w/FF + IE

    So I have made the change for vertical3 ie. 'Accueil/Notre Savoir Faire' but not for the others 2 so you compare and see also what it looks like w/FF or IE.
    I also changed it for the 3 Hslide ('Services' tab) It has minor behavior change under FF as it partly slides back onto place.
    I really appreciate your feedback and any other suggestions on this topic.

IMN logo majestic logo threadwatch logo seochat tools logo