I have a a nice jquery slide down effect working here:
http://georgedesign.co.uk/test/markupV2/index.html
In the Services section or Team section you can click on any of the panels and a ‘more info’ box opens up.
Click on the box again and its gone.
The problem is this: In IE(7) the very fist panel named ‘About’ doesn’t behave like the rest of the panels.. Instead it slides down below the parent div and doesn’t seem to be adopting the ‘position:fixed’ css style like the others..
The content of this panel is also invisible..
I’ve been staring at this problem for a week or two now, and my eyes are melting..
I just can’t figure out why its working fine across all other browsers, and the other panels work fine, but not the first one.
If anyone could have a quick look over the code and see what I (must have!) missed I’d be grateful for another pair of eyes..!
Thanks so much,
G
ps, I’m sure the JQuery can be shortened, but I’m still getting to grips with it! 😉
Here’s the code if it helps:
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">
<li class="slide1">
<div class="holder">
<div class="frame">
<h3><a href="#">About</a></h3>
<div class="description">
<p>Our business was established in 2002 and we remain an inspired and motivated team of property professionals.</p>
</div>
<img src="images/img1.jpg" width="233" height="139" alt="about" />
<a class="more" href="#">Read more...</a>
</div>
</div>
</li>
<div class="Text1 round">
<img src="images/X.gif" class="x-class" width="12" height="12" alt="X">
<p>Our success is driven by our integrity which is at the heart of everything we do, our recognition of the wisdom and vision of others around us, and our will to succeed.
Collectively the Athanor Team have in excess of 80 years experience working in real estate and financial markets. This has given us a deep understanding of how to innovate and drive value in changing conditions. We have been involved in property transactions with a value of in excess of £3 billion.<br>
Athanor are specialists in :</p>
<ul>
<li>The origination of property investment opportunities
</li>
<li>Strategy & analysis
</li>
<li>Debt origination
</li>
<li>Establishment of appropriate corporate, tax and fund structures
</li>
<li>Property asset management.
</li>
<li>Property disposals.
</li>
</ul>
<img class="round" src="images/img88.jpg" width="300" height="154" alt="Mission Crane">
</div>
<li class="slide2">
<div class="holder">
<div class="frame">
<h3><a href="#">Mission</a></h3>
<div class="description">
<p>To excel in providing our clients with a focused, individual and comprehensive solution to property investing.</p>
</div>
<img src="images/img2.jpg" width="233" height="139" alt="mission" />
<a class="more" href="#">Read more...</a>
</div>
</div>
</li>
<li class="slide3">
<div class="holder">
<div class="frame">
<h3><a href="#">Strategy</a></h3>
<div class="description">
<p>At Athanor we focus on ‘value’ investing into primarily institutional quality property.</p>
</div>
<img src="images/img3.jpg" width="233" height="139" alt="strategy" />
<a class="more" href="#">Read more...</a>
</div>
</div>
</li>
</ul>
<div class="Text2 round">
<img class="round" src="images/mission-crane.jpg" width="450" height="306" alt="Mission Crane">
<img src="images/X.gif" class="x-class" style="float:right" width="12" height="12" alt="X">
<h3>Mission</h3>
<p>"To excel in providing our clients with a focused, individual and comprehensive solution to property investing. To generate value and real returns in any environment."
</p>
</div>
<div class="Text3 round">
<img src="images/X.gif" class="x-class" width="12" height="12" alt="X">
<p>At Athanor we focus on 'value' investing into primarily institutional quality property. We target assets providing long term locational stability, with secure and attractive income returns and which also have the potential for both income and capital growth. Cash forms a significant proportion of our total return expectations.<br>
New opportunities are selected via a combination of research, intelligence and experience.<br>
Our approach is opportunistic both geographically and by property sector, although always with a view to having a balance commensurate with our perception of the risks and rewards associated with those sectors and geographies.<br>
We understand that real estate assets are very responsive to active management. Consequently asset management is a core activity which ensures returns are maximised throughout the life of investments.<br>
Primary geographies – UK and Continental Europe.<br>
Property sectors – all property sectors but primarily retail, logistics/industrial, offices, leisure and residential.</p>
</div>
</div>
CSS:
li.slide1, li.slide2, li.slide3, li.mug1, li.mug2, li.mug3, li.mug4 {cursor:pointer;}
div.Text1, div.Text2, div.Text3, div.mugText1, div.mugText2, div.mugText3, div.mugText4 {display:none; margin-top:24px;}
div.Text1, .Text2, .Text3, .mugText1, .mugText2, .mugText3, .mugText4 {
background-color: white;
position:fixed;
top:215px;
width:860px;
height:323px;
padding:20px;
border: 1px solid #e6e6e6;
}
.mugText1, .mugText2, .mugText3, .mugText4 {position:fixed; top:215px; height:400px;}
.Text1 img {float:right;}
.Text1 p {margin:0; font-size:18px;}
.Text1 ul {font-size:16px; width:440px; float:left;}
.Text2 img {float:left}
.Text2 p, .Text2 h3 {margin: 0 90px 0 490px !important;}
.Text3 p {font-size:18px}
JS:
$('.slide1').click( function() { $('.Text1').slideDown(500).fadeIn(500);
$('.Text2').slideUp(250).fadeOut(0); $('.Text3').slideUp(250).fadeOut(0); } );
$('.slide2').click( function() { $('.Text1').slideUp(250).fadeOut(0);
$('.Text2').slideDown(500).fadeIn(500); $('.Text3').slideUp(250).fadeOut(0); } );
$('.slide3').click( function() { $('.Text1').slideUp(250).fadeOut(0); $('.Text2').slideUp(250).fadeOut(0);
$('.Text3').slideDown(500).fadeIn(500); } );
$('.Text1, .Text2, .Text3').click( function() { $('.Text1, .Text2, .Text3').slideUp(250).fadeOut(0); } );
$('.mug1').click( function() { $('.mugText1').slideDown(500).fadeIn(500);
$('.mugText2').slideUp(250).fadeOut(0); $('.mugText3').slideUp(250).fadeOut(0);
$('.mugText4').slideUp(250).fadeOut(0); } );
$('.mug2').click( function() { $('.mugText2').slideDown(500).fadeIn(500);
$('.mugText1').slideUp(250).fadeOut(0); $('.mugText3').slideUp(250).fadeOut(0);
$('.mugText4').slideUp(250).fadeOut(0); } );
$('.mug3').click( function() { $('.mugText3').slideDown(500).fadeIn(500);
$('.mugText1').slideUp(250).fadeOut(0); $('.mugText2').slideUp(250).fadeOut(0);
$('.mugText4').slideUp(250).fadeOut(0); } );
$('.mug4').click( function() { $('.mugText4').slideDown(500).fadeIn(500);
$('.mugText1').slideUp(250).fadeOut(0); $('.mugText2').slideUp(250).fadeOut(0);
$('.mugText3').slideUp(250).fadeOut(0); } );
$('.mugText1, .mugText2, .mugText3, .mugText4').click( function() { $('.mugText1, .mugText2, .mugText3, .mugText4').slideUp(150).fadeOut(0); } );
}
Well, I finally found a good workaround after much tearing of hair.
I’m using a jquery plugin for rounded corners, named ‘curvycorners’. Its pretty cool, anything you want to have a rounded corner, just give it a class of round and away you go..
Only downside is.. IE can’t handle it, and gets a bit confused, adding a class of drawn and a position relative to the first div it finds with the class of ’round’.
All I did was add a dummy div with a class of ’round’ and ‘display:none’ before the 1st proper element I want to have rounded corners. And hey presto, no more issues!
I hope this’ll help somebody if they ever run into the same weirdness! 😉
Thanks guys,
G