.toggle is not working properly in IE8

Question

In IE8 the toggle kinda works but it overlays the content below. It works fine in all the other browsers. I've been trying for the past 2 hours to fix this but no luck...

Here's what I mean

jquery:

$(document).ready(function() {  

    $('.toggle').hide();

    $('.expand-all').click(function(){
        // switch visibility
        $(this).data('is_visible', !$(this).data('is_visible'));

        // change the link depending on whether the element is shown or hidden
        $(this).html( (!$(this).data('is_visible')) ? 'Expand all' : 'Hide');

        $(this).next().toggle();

    return false;
    }); 


});

html:

    <div id="categories">
        <div class="cat">
            <h3>Rice</h3>
            <ul>
                <li><a href="">Rice brand 1</a></li>
                <li><a href="">Rice brand 2</a></li>
                <li class="expand-all">Expand all</li>
                <div class="toggle">
                    <li><a href="">Rice brand 1</a></li>
                    <li><a href="">Rice brand 1</a></li>
                </div>
            </ul>
        </div>
        <div class="cat">etc</div>
        <div class="cat">etc</div>
        <div class="cat">etc</div>
    </div>

Answer 1

It appears as though you are having an issue with the display : inline-block property you are setting.

Here is something to try, for more things to try just Google "internet explorer 8 inline-block": http://www.compsoft.co.uk/Blog/2009/11/inline-block-not-quite-inline-blocking.html

Also IE7 will not accept the display : inline-block property, so you need to add this to your code to make it work in IE7 as well:

.some-ele {
    display  : inline-block;
    *display : inline;
    zoom     : 1;
}

The *display property is invalid but will still be read by IE7 and for it to take affect the element must have the hasLayout property which you can't set manually but you can force it to be set by setting zoom : 1.

For IE6 you need to specify a height for display : inline-block to work but if you only want to specify a height for IE6 you can use _height : XXpx which will only be read by IE6 (more invalid code that IE will digest). Here is some info on this: http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/