CODEWITHSUNDEEP
jqueryhtmlcssinternet-explorer-7compatibility
TDsouza
TDsouza

Reputation: 938

jquery slide issue in IE7

I have a little problem with the slide effect on IE7. I have a nested list with the following code

   <div class="left_panel_body">
        <ul class="side_panel_list" style="margin-top:53px">
            <li id="click"><a>PQR</a></li>
                <div id="dropdown" style="display:none;">
                <ul style="list-style:none">
            <li><a href="#" style="padding-left:20px">xyz</a></li>
            <li><a href="#" style="padding-left:20px">xyz</a></li>
            <li><a href="#" style="padding-left:20px">xyz</a></li>
            </ul>
                </div>
            <li><a href="#">abc</a></li>
            <li><a href="#">abc</a></li>
            <li><a href="#">abc</a></li>
        </ul>
        </div>

while the css is as follows

    #click {background-color: rgb(234, 234, 234);
height: 24px;
margin-top: 2px;
width: 99%;}

   #dropdown {display:none}

    .side_panel_list li {background-color: rgb(234, 234, 234);
height: 24px;
margin-top: 2px;
width: 99%;}

while I have the following script in the head 

   <script> 
    $(document).ready(function(){
    $("#click").click(function(){
    $("#dropdown").slideToggle("slow");
    });
    });
    </script>

there's not much Css applied needless to say #click initiates the slide onclick and #dropdown is the element that slides down and back up on another click... if looks great in all browsers but in IE7 the li's dont slide down to make space for #dropdown while #dropdown ends up behind the li's below...

Upvotes: 0

Views: 131

Answers (1)

kmoney12
kmoney12

Reputation: 4490

You probably need to add some additional CSS for IE7 to view it properly.

In any case, we are going to need more code to give you a good answer. You might even want to provide a URL in this case so we can examine the CSS.

Upvotes: 0

Related Questions