I have implemented a fantastic jQuery slide down effect on this website:
If you visit the Services or Team sections, you can click on any panel to expand a 'more info' box. Clicking again will close the box.
The issue I am facing is with Internet Explorer (version 7), where the first panel called 'About' is not behaving like the other panels. It slides below the parent div and does not seem to be applying the 'position:fixed' CSS style like the rest of the panels.
Moreover, the content in this panel is invisible.
I have been struggling with this problem for a couple of weeks, and it's driving me crazy. I can't understand why it works perfectly in all other browsers except IE(7) and why only the first panel is affected.
If someone could review the code quickly and point out what I may have missed, I would greatly appreciate another pair of eyes!
Thank you so much,
G
PS: I believe the jQuery code can be optimized, but I'm still learning!
Here is the relevant code:
HTML:
<div class="our-services">
<strong class="slogan main-strap">Property Investment for Private Equity</strong>
<span id="services" class="scroll"> </span>
<h2>Our Services</h2>
<p>We are a UK & European Property Investment and Asset Management Business, dedicated to generating value and providing real returns to our investors in any environment.</p>
<ul class="services-list">
<!-- Panel 1 -->
<li class="slide1">
...
</li>
<!-- Panel 2 -->
<li class="slide2">
...
</li>
<!-- Panel 3 -->
<li class="slide3">
...
</li>
</ul>
...
CSS:
li.slide1, li.slide2, li.slide3 {cursor:pointer;}
...
/* Styling for text boxes */
.Text1, .Text2, .Text3 {
display:none;
margin-top:24px;
background-color: white;
position:fixed;
top:215px;
width:860px;
height:323px;
padding:20px;
border: 1px solid #e6e6e6;
}
...
JS:
$('.slide1').click( function() { $('.Text1').slideDown(500).fadeIn(500);
...
}