Need JQuery fix for IE! Help!

JavaScript
1

I’m going crazy. I’ve got my page working in IE now, all except for one little function - changing the sprite position on the toggle show/hide function. The client wants that minor issue fixed even though I’ve managed to get the stupid function working in IE…

So, you can see the page here: www.asg-llc.com/profiles.php

Here’s the relevant code (let me know if I’m including it wrong):

<html>
<head>
<script type="text/javascript" src="js/jquery-1.5.min.js"></script>



<style type="text/css">
.accordion2 {
	float: left;
	width:500px;
	margin-right:30px;
}
.accordion2 h3 {
padding: 5px; 
cursor:pointer; 
background: #ccc url(images/state3.png) no-repeat 100% 5px; 
display:block; 
text-decoration:none; 
margin:0; 
margin-top:10px;
}

.accordion2 h3 a
{color: #000; 
text-decoration:none;}

.accordion2 h3.active {
background: #ccc url(images/state4.png) no-repeat 100% 5px; 

}
.accordion2 p {
	background: #EAEAEA;
	margin: 5px 0;
	padding: 0px;
	display:none;

}

.biopic {
	width:135px;
	margin-left:10px;
	padding:5px 7px 5px 0px;
	float:left;
}

.biocontact {
	width:405px;
	margin:50px 0 0 0;
	padding:0;
	
}

</style>


<script type="text/javascript">
$(document).ready(function(){

	$(".accordion2 h3").eq(7).addClass("active");
	$(".accordion2 p").eq(7).show();

	$(".accordion2 h3").click(function(){
	  $(this).next("p").slideToggle("slow")
	  .siblings("p:visible").slideUp("slow");
	  $(this).toggleClass("active");
	  $(this).siblings("h3").removeClass("active");
	});

});


</head>

<body>
 <div class="accordion2"> 
              
              <h3 class="accordion2">
              
              <div class="biopic"><a name="whaley" id="whaley"></a><img src="images/whaley_headshot.jpg" alt="Greg Whaley" /></div>
                      <div class="biocontact">
                      <span class="style5">Greg Whaley</span><br />
						<span class="style2">
                      President + Owner</span><br />
                      <img src="images/icon-email.png" width="20" height="8"  alt="Email Us"/> <span class="style3">gwhaley@asg-llc.com</span>
                      </div>
                    </h3>
                   
     
                          <p class="accordion2">Greg Whaley is the President and Owner of Academy Solutions Group, LLC. He is a retired Air Force Colonel and Command Pilot who flew both B-52 and B-1B aircraft. His military service includes command tours at the squadron and group level, as well as, staff assignments at Strategic Air Command and the National Security Agency. Following the Air Force, he worked at SAIC and General Dynamics as a Senior Program Manager and Manager of a Line of Business until launching Academy Solutions Group, LLC in 2003.    
                          <br /><br />
  He has grown Academy Solutions Group into a high-tech company specializing in support to DoD and the Intelligence Community in the areas of Cyber, Systems Engineering, Program Management Support, and System Development. His clientele includes companies such as Lockheed Martin, Northrop Grumman, SAIC, L-3, ITT, CSC, and Serco. In 2008, Northrop Grumman selected ASG as a Small Company Excellence Award recipient from among more than 4,000 eligible small companies due to its contributions in the area of Cyber Defense.   
  <br /><br />
  Greg received a BS degree from the Air Force Academy in Engineering Sciences and an MS in Operations Research from the Air Force Institute of Technology. Additionally, he has an MBA from Wharton at the University of Pennsylvania. <br />
  </p>

                    <h3 class="accordion2">
                    
                    <div class="biopic"><a name="wertman" id="wertman"></a><img src="images/wertman_headshot.jpg" alt="Chris Wertman" />
                    </div>
                      <div class="biocontact">
                      <span class="style5">Chris Wertman</span>
                        <br /><span class="style2">Vice President for SETA<br /> + Systems Engineer</span><br />
                        <img src="images/icon-email.png" width="20" height="8"  alt="Email Us"/> 
                        <span class="style3">cwertman@asg-llc.com</span> 
                        </div>
				</h3>                   
    
                          <p class="accordion2">Chris Wertman is Vice President for SETA at ASG.  Chris has more than 25 years of acquisition experience in the Air Force, Civil Service, and as a contractor.  With over 23 years in the U.S. Air Force Chris served in Thailand, S. Korea, Germany and several stateside locations, in the Personnel, Aerospace Engineer, and Intelligence career fields.  Chris has managed multi-task order contracts in excess of $100M each.  He has vast experience as a systems engineer with C4ISR systems development, installation, and operation.  He has extensive modeling and simulation expertise including support to the Defense Modeling and Simulation Office (DMSO).
                          <br /><br />
  He is a Project Management Professional (PMP), through the Project Management Institute.  He is also a Senior Fellow with the American Institute for Aeronautics and Astronautics (AIAA), and past member of Simulations Interoperability Standards Organization (SISO), Military Operations Research Society (MORS), Institute of Electrical and Electronics Engineers (IEEE), Armed Forces Communications and Electronics Association (AFCEA), and National Defense Industrial Association (NDIA).  Chris was an officer in SISO and a member of the IEEE Standards Committee.   
  <br /><br />
 Chris has B.S in Aerospace Engineering from the University of Oklahoma and an M.S in Management Information Systems (MIS) from Boston University. </p>

</div>

</body>
</html>

Thanks!!

2

Hi,

It seems that the problem is that there is an inline “filter” style being written into the accordion h3 element which makes IE8 use the alpha image loader filter. When using the filter there is no equivalent to background-position which is why the image doesn’t change.

I assume the filter was meant for IE6 which doesn’t understand png transparency but all versions of IE will see it when it is inline.

You could try hiding the filter like this:


.accordion2 > h3{filter:none!important}

That should hide the filter in ie7 and 8 with any luck

On another matter why is this image 54k? It should be about half a k.

3

Thanks for your reply!

Two things:
1.
Why is the image so big? Don’t know, I was hired to fix a page that I didn’t create (to get it would work in IE) so I didn’t create the page or the images. Which makes everything EXTRA frustrating since I did not write the original code (I got it to work in IE, except the stupid arrow image doesn’t change in IE.)

  1. The page DOES work in IE6/IE7 - but the bg image does not change in those versions either - not just IE8. Does your advice still apply?

thanks!

4

Yes it can be a pain working on other peoples code.


2. The page DOES work in IE6/IE7 - but the bg image does not change in those versions either - not just IE8. Does your advice still apply?

thanks![/QUOTE]

In IE6 you get that whole png image displayed width both states on the screen by default and stretches the gray area downwards. I doubt there's anythnig you can do for IE6 simply other than not using a transparent png image and not using the filter on it. It doesn't seem you need a png image anyway as you could just have small gif with no transparency (or just index transparency) anyway.

The code I gave you may help IE7 and 8 so try it out first. I couldn't test locally as the script that was adding the inline style wouldn't work when I copied it locally. I can tell you though that without the inline filter styling IE8 was working fine and swapping that image.
5

Ok, scrub the above code and just use this instead.

Put the existing call to supersleight inside the conditional comments as shown below to stop ie8 and 7 getting it as they don’t need it.


<!--[if lte IE 6]>
<script type="text/javascript" src="http://www.asg-llc.com/js/supersleight-min.js"></script>
<![endif]-->
6

Thanks for the code - I’ll give it a try and keep my fingers crossed!!

:slight_smile:

7

You rock! It works now in IE - I can’t thank you enough - I really didn’t want to spend my weekend tweaking someone else’s code. I changed the images to .gifs as well.

Thanks again!
Haikukitty (: