Grow your CSS skills. Land your dream job.

Margin disappearing on slideToggle in IE

  • # March 29, 2011 at 12:30 am

    Howdy,

    I need some help!

    I have this:

    $(document).ready(function() {
    $(".toggle_container").hide();

    $("h2.trigger").click(function() {
    $(this).toggleClass("active").next().slideToggle(300);
    return false;
    });
    });

    Applied to this:



    Marketing Consulting


    Expert marketing consulting to guide your way, troubleshoot and help you come up with sound strategy and marketing planning. As well as being included in many of our marketing packages, marketing consulting is offered separately in blocks of hours or on a project basis.






    Marketing Analysis


    We offer an analysis of your current marketing. This is an extensive evaluation of your marketing messaging and imagery, your print and Internet marketing, where applicable, your results and your markets.


    with this CSS:

    h2.trigger {
    background:url(../images/service-nav-sprite.png) no-repeat scroll top left;
    cursor:pointer;
    display:block;
    margin:10px 0 0 0; padding:0;
    width:701px;height:41px;
    }

    .toggle_container {
    background-image:url(../images/serv-content-bg.png);
    background-repeat:repeat;
    border:1px solid #dddddd;
    padding:8px 10px;
    }

    I’m looking at it in IE 8 and when you click one of the boxes, it expands but when you click it again to close it, it collapses but loses the top margin. It works fine in FF and Chrome.

    Obviously it’s meant to retain the margin:10px 0 0 0; declared in h2.trigger {}

    Don’t know why… Here is a link to the problem: http://websitesthatmarket.com/tpo/test/

    # March 29, 2011 at 10:43 am

    I hope this post doesn’t get lost in oblivion!

    # March 29, 2011 at 9:57 pm

    well i guess this one is too hard for jamy_za and TheDoc :)

    # March 29, 2011 at 11:26 pm

    haha sorry, Soap – I am no JQuery expert. But here’s an extra little bump for you!

    Also, you can always grab Jamy’s attention by putting his name like this: @jamy_za – hi Jamy!

    # March 30, 2011 at 12:26 am

    I looked around the web and apparently this is an IE8 bug and people say they’ve fixed it with overflow:hidden but this didn’t work for me..

    # March 30, 2011 at 3:11 am

    Hi Gray =)

    @soap, IE has problems every so often, instead of trying figure out exactly why something is happening, sometimes it’s best just to change the way you’re doing it.

    Try this kind of markup:




    • Marketing Consulting


      Expert marketing consulting to guide your way, troubleshoot and help you come up with sound strategy and marketing planning. As well as being included in many of our marketing packages, marketing consulting is offered separately in blocks of hours or on a project basis.





    • Marketing Analysis


      We offer an analysis of your current marketing. This is an extensive evaluation of your marketing messaging and imagery, your print and Internet marketing, where applicable, your results and your markets.



    $(document).ready(function() {
    $("#toggle-containers li").css('height', '40px');

    $("h2.trigger").click(function() {
    if($(this).parent().hasClass("active")){
    $(this).parent().removeClass("active").animate({height: '40px'});
    }
    else{
    $(this).parent().toggleClass("active").animate({height: '100%'});
    }
    return false;
    });
    });

    I haven’t tested the js and it could be optimized, but you get what I mean.
    And add the margin to the li’s

    # March 30, 2011 at 10:42 am

    I will give it a shot tonight and let you know how it goes. Thanks a lot! :)

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".