jQuery issue with IE7

Having an issue with a DIV appearing and disappearing within IE7 only. All other browsers work fine. Script and markup and CSS below. Any ideas

view sample here:

http://dev.griffiti.com/inheritage/index.html
SCRIPT & MARKUP

	<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
	
	<script type="text/javascript">
      (function ($) {
        $.fn.fadeTransition = function(options) {
          var options = $.extend({pauseTime: 5000, transitionTime: 2000, ignore: null, delayStart: 0, pauseNavigation: false}, options);
          var transitionObject;

          Trans = function(obj) {
            var timer = null;
            var current = 0;
            var els = (options.ignore)?$("> *:not(" + options.ignore + ")", obj):$("> *", obj);
            $(obj).css("position", "relative");
            els.css("display", "none").css("left", "0").css("top", "0").css("position", "absolute");
            
            if (options.delayStart > 0) {
              setTimeout(showFirst, options.delayStart);
            }
            else
              showFirst();

            function showFirst() {
              if (options.ignore) {
                $(options.ignore, obj).fadeOut(options.transitionTime);
                $(els[current]).fadeIn(options.transitionTime);
              }
              else {
                $(els[current]).css("display", "block");
              }
            }

            function transition(next) {
              $(els[current]).fadeOut(options.transitionTime);
              $(els[next]).fadeIn(options.transitionTime);
              current = next;
              cue();
            };

            function cue() {
              if ($("> *", obj).length < 2) return false;
              if (timer) clearTimeout(timer);
              if (!options.pauseNavigation) {
                timer = setTimeout(function() { transition((current + 1) % els.length | 0)} , options.pauseTime);
              }
            };
            
            this.showItem = function(item) {
              if (timer) clearTimeout(timer);
              transition(item);
            };

            cue();
          }

          this.showItem = function(item) {
            transitionObject.showItem(item);
          };

          return this.each(function() {
            transitionObject = new Trans(this);
          });
        }

      })(jQuery);
    
      var page = {
        tr: null,
        init: function() {
          page.tr = $(".slideShow").fadeTransition({pauseTime: 5000, transitionTime: 2000, delayStart: 1000});
          $("div.navigation").each(function() {
            $(this).children().each( function(idx) {
              if ($(this).is("a"))
                $(this).click(function() { page.tr.showItem(idx); return false; })
            });
          });
        },
		
        show: function(idx) {
          if (page.tr.timer) clearTimeout(page.tr.timer);
          page.tr.showItem(idx);
        }
      };

      $(document).ready(page.init);    
    </script>
	
</head>

<body>
	<div id="outer_container">
		<div id="inner_container">
			<div id="slides_bg">
				<div id="homeLink">
					<a href="index.html">&nbsp;</a>
				</div>
				<div class="slideShow">
			      <div class="rotator r1">
			        <div class="navigation">
			          <div class="current"></div>
			          <a href="#">&nbsp;</a>
			          <a href="#">&nbsp;</a>
			          <a href="#">&nbsp;</a>
					  <a href="#">&nbsp;</a>
			        </div>
					 <div class="pausePlay">
						<a href="#">&nbsp;&nbsp;&nbsp;</a>
					  </div>
			         <img src="images/slide01.jpg" alt="Your Description" />
					<p><em>Along the Blueridge Parkway</em><br />
						Western North Carolina<br />
						June 2010<br />
						<font color="#bfbfbf" size="1">InHeritage Travel Collection &copy;</font></p>
			      </div>
			      <div class="rotator r1">
			        <div class="navigation">
			          <a href="#">&nbsp;</a>
			          <div class="current"></div>
			          <a href="#">&nbsp;</a>
			          <a href="#">&nbsp;</a>
					  <a href="#">&nbsp;</a>
			        </div>
					<div class="pausePlay">
						<a href="#">&nbsp;&nbsp;&nbsp;</a>
					  </div>
			         <img src="images/slide02.jpg" alt="Your Description" />
					<p><em>My Picture Number Two</em><br />
							Somewhere on the East Coast<br />
							January 2010<br />
							<font color="#bfbfbf" size="1">InHeritage Travel Collection &copy;</font></p>
			      </div>
			      <div class="rotator r1">
			        <div class="navigation">
			          <a href="#">&nbsp;</a>
			          <a href="#">&nbsp;</a>
			          <div class="current"></div>
			          <a href="#">&nbsp;</a>
					  <a href="#">&nbsp;</a>
			        </div>
					<div class="pausePlay">
						<a href="#">&nbsp;&nbsp;&nbsp;</a>
					  </div>
			      <img src="images/slide03.jpg" alt="Your Description" />
				<p><em>My Picture Number Three</em><br />
						Western North Carolina<br />
						April 2010<br />
						<font color="#bfbfbf" size="1">InHeritage Travel Collection &copy;</font></p>
			      </div>
			      <div class="rotator r1">
			        <div class="navigation">
			          <a href="#">&nbsp;</a>
			          <a href="#">&nbsp;</a>
			          <a href="#">&nbsp;</a>
			          <div class="current"></div>
					  <a href="#">&nbsp;</a>
			        </div>
					<div class="pausePlay">
						<a href="#">&nbsp;&nbsp;&nbsp;</a>
					  </div>
			        <img src="images/slide04.jpg" alt="Your Description" />
						<p><em>My Picture Nimber 4</em><br />
							Western North Carolina<br />
							March 2010<br />
							<font color="#bfbfbf" size="1">InHeritage Travel Collection &copy;</font></p>
			      </div>
					<div class="rotator r1">
				        <div class="navigation">
				          <a href="#">&nbsp;</a>
				          <a href="#">&nbsp;</a>
				          <a href="#">&nbsp;</a>
						  <a href="#">&nbsp;</a>
				          <div class="current"></div>
				        </div>
						<div class="pausePlay">
							<a href="#">&nbsp;&nbsp;&nbsp;</a>
						  </div>
				        <img src="images/slide05.jpg" alt="Your Description" />
						<p><em>My Picture Number 5</em><br />
								Washington DC<br />
								April 2008<br />
								<font color="#bfbfbf" size="1">InHeritage Travel Collection &copy;</font></p>
				      </div>
			    </div>



CSS


.slideShow {
	z-index: 10;
}

div.rotator { 
	position: relative; 
	height: 375px; width: 757px; 
	margin-top: 100px; 
	margin-left: 190px; 
}

div.r1 { 

}

div.r1 p { 
	margin-top: 138px;
	text-align: left; 
	font-size: 11px;
	line-height: 30px;
	color: #ffffff;
	float: right;
	width: 167px;
	height: 196px;
	background-image: url('images/textbg.gif');
	background-repeat: no-repeat;

}


div.navigation { 
	position: absolute;
	top: 150px;
	left: -80px; 
}

div.navigation div.current, div.navigation a { 
	width: 12px;
	height: 20px; 
	margin: 0 0px 0 0; 
	overflow: hidden; 
	background-image: url('images/slide_position.png'); 
	background-repeat: no-repeat;
	text-decoration: none;
	
}

div.navigation a:hover { 
	text-decoration: none;
	
}

div.navigation div.current { 
	background-image: url('images/slide_position_hover.png'); 
	background-repeat: no-repeat; 
}

div.navigation a { 
	display: block; 
	background-image: url('images/slide_position.png'); 
}

#introslide { 
	background: transparent; 
}

div.pausePlay {
	position: absolute;
	width: 16px;
	height: 16px;
	top: 250px;
	left: -82px;
	display: block;	
	overflow: hidden;
}

div.pausePlay a {
	background: url('images/pause_play_all.png');
	background-repeat: no-repeat;
	background-position: 0 0;
	text-decoration: none;
}

div.pausePlay a:hover {
	background: url('images/pause_play_all.png');
	background-repeat: no-repeat;
	background-position: 0 -16px;
	text-decoration: none;
}

Open in new window

GAGriffAsked:
Who is Participating?
 
David S.Commented:
It looks like IE7 doesn't like that "div.navigation" is absolutely positioned outside of its parent. I recommend you use left padding on "div.rotator" instead of a left margin and then adjust the value of the left property for its descendants as needed.
0
 
mickey159Commented:
I don't know where your problem exactly is.
But you may use navigator to detect browser.
If it is IE7 then show a notice that the website doesn't support IE7 and tell them to change.

Good luck!
0
 
GAGriffAuthor Commented:
You were right about the being positioned outside the container. Once I move all into the main container it worked in IE7, but I had to completely change the CSS for IE7. Navigation had to be relatively positioned.

Thanks
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.