Show hide functionality for ie7 & ie8 not working using JQuery

[kavya shree]

show hide functionality is not working in IE8 and IE7 Bt its working in all the browser

Here is the HTML code

 <div class="navigations">
<div class="grid_4 consulting" style="margin-left:50px" ><h1> Consulting</h1></div>
<div class="grid_4 push_1 engineering"  >  <h1> Engineering</h1></div>
<div class="grid_4 push_2 solutions"><h1> Solutions</h1></div>
</div>
 
             <div class=" grid_16 consulting_dis" style="display:none" >
               <ul id="list1">
                 <li> Web Development</li>
                  <li> Web Designing</li>
                 <li>CMS Customization</li>
                 <li> Mobile App Development</li>
                  <img src="img/seperater1.png" />
                 </ul>
 
                 <div class="grid_11 content_discription1">
                 <p>As a developer, you're an extremely creative individual. Getting your websites behave in Internet Explorer is 
                 <br /> proof enough... you are creative. Even so, you may not have the time or know-how needed to get the design of 
                 <br />your site looking as clean as your code. That's OK. I take design as seriously as you take your markup. Have </p>
                 </div>            
           <div class="grid_16 engineering_dis" style="display:none" >
                <ul id="list1">
                 <li> Web xxxxxxxxxx</li>
                  <li> Web xxxxxxxxxx</li>
                 <li>CMS xxxxxxxxxxxx</li>
                 <li> Mobile App xxxxxxxxxxx</li>
                 <img src="img/seperater1.png" />
                 </ul>
                 <div class="grid_11 content_discription1">
                 <p>xxxxxxxxx xxxxxxxxxxxx xxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxx xxxxxxxxxxxxx 
                 <br /> proof enough... you are creative. Even so, you may not have the time or know-how needed to get the design of 
                 <br />your site looking as clean as your code. That's OK. I take design as seriously as you take your markup. Have </p>
                 </div>            
            <div class="grid_16 solutions_dis" style="display:none">
                 <ul id="list1">
                 <li> Web yyyyyyyy</li>
                  <li> Web yyyyyyyyy</li>
                 <li>CMS yyyyyyyyyyy</li>
                 <li> Mobile App yyyyyyyy</li>
                 <img src="img/seperater1.png" />
                 </ul>
 
                <div class="grid_11 content_discription1">
                 <p>yyyyyyyy yyyyyyyy yyyyyyyy yyyyyyyy yyyyyyyy yyyyyyyy yyyyyyyy yyyyyyyy yyyyyyyy yyyyyyyy yyyyyyyy 
                 <br /> proof enough... you are creative. Even so, you may not have the time or know-how needed to get the design of 
                 <br />your site looking as clean as your code. That's OK. I take design as seriously as you take your markup. Have </p>
                 </div>               
            </div>

And here is the jquery code

$(document).ready(function(){
    $(".consulting").click(function () {$(".consulting_dis").show('fast');
       $(".engineering_dis,.solutions_dis,.services_dis").hide('fast');});
    $(".engineering").click(function () {$(".engineering_dis").show('fast');
         $(".consulting_dis,.solutions_dis,.services_dis").hide('fast');});
    $(".solutions").click(function () {$(".solutions_dis").show('fast');
         $(".consulting_dis,.engineering_dis,.services_dis").hide('fast');});
    $(".services").click(function () {$(".services_dis").show('fast');
         $(".consulting_dis,.solutions_dis,.engineering_dis").hide('fast');});
});

I used plug in called jquery.js and also tried for jquery-1.3.2.min.js its working in all the browser except those two ..

Could u plz help me out to over come this poblem.. if possible plz send me the code.

[invoked]

Here is the code:

<div class="navigations">
            <div class="grid_4 consulting" style="margin-left: 50px">
                <h1>
                    Consulting</h1>
            </div>
            <div class="grid_4 push_1 engineering">
                <h1>
                    Engineering</h1>
            </div>
            <div class="grid_4 push_2 solutions">
                <h1>
                    Solutions</h1>
            </div>
        </div>
        <div class=" grid_16 consulting_dis" style="display: none">
            <ul id="list1">
                <li>Web Development</li>
                <li>Web Designing</li>
                <li>CMS Customization</li>
                <li>Mobile App Development</li>
                <img src="img/seperater1.png" />
            </ul>
            <div class="grid_11 content_discription1">
                <p>
                    As a developer, you're an extremely creative individual. Getting your websites behave
                    in Internet Explorer is
                    <br />
                    proof enough... you are creative. Even so, you may not have the time or know-how
                    needed to get the design of
                    <br />
                    your site looking as clean as your code. That's OK. I take design as seriously as
                    you take your markup. Have
                </p>
            </div>
        </div>
        <div class="grid_16 engineering_dis" style="display: none">
            <ul id="Ul1">
                <li>Web xxxxxxxxxx</li>
                <li>Web xxxxxxxxxx</li>
                <li>CMS xxxxxxxxxxxx</li>
                <li>Mobile App xxxxxxxxxxx</li>
                <img src="img/seperater1.png" />
            </ul>
            <div class="grid_11 content_discription1">
                <p>
                    xxxxxxxxx xxxxxxxxxxxx xxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxx xxxxxxxxxxxxx
                    <br />
                    proof enough... you are creative. Even so, you may not have the time or know-how
                    needed to get the design of
                    <br />
                    your site looking as clean as your code. That's OK. I take design as seriously as
                    you take your markup. Have
                </p>
            </div>
        </div>
        <div class="grid_16 solutions_dis" style="display: none">
            <ul id="list1">
                <li>Web yyyyyyyy</li>
                <li>Web yyyyyyyyy</li>
                <li>CMS yyyyyyyyyyy</li>
                <li>Mobile App yyyyyyyy</li>
                <img src="img/seperater1.png" />
            </ul>
            <div class="grid_11 content_discription1">
                <p>
                    yyyyyyyy yyyyyyyy yyyyyyyy yyyyyyyy yyyyyyyy yyyyyyyy yyyyyyyy yyyyyyyy yyyyyyyy
                    yyyyyyyy yyyyyyyy
                    <br />
                    proof enough... you are creative. Even so, you may not have the time or know-how
                    needed to get the design of
                    <br />
                    your site looking as clean as your code. That's OK. I take design as seriously as
                    you take your markup. Have
                </p>
            </div>
        </div>
 

As a tip, when I am creating some new awesome html/jQuery code, I always start in a test web page without a master page so I can step through my jQuery code if needed. Also, make use of any available 'Format Selection' options in you html designer and if your designer doesn't have an option like this, get a new designer fast as I believe your issue was simply malformed html. I corrected it assuming what I thought you were doing, but if what I did was incorrect, please reply back to me. Your jQuery shouldn't need to change. Also, given the issue I found, I dont think it was a jQuery version issue but I was using jQuery 1.4.1.

Good luck!