1 reply [Last post]
drbyers
drbyers's picture
Offline
newbie
Last seen: 9 years 34 weeks ago
Timezone: GMT-4
Joined: 2010-09-17
Posts: 1
Points: 2

Hi Everyone,

I've been scouring both jQuery and CSS forums for an answer to my question to no avail, as of yet.

I'm using a typical jQuery slidedown menu placed inside of it's own html page, which is then included on the main homepage via server-side include action.

The problem is with the lower half of the menu items. They shift down approximately 10 pixels when you rollover any of the menu items and stay there until you refresh the page. This problem only occurs in internet explorer 7 for windows that I'm aware of. It works fine on internet explorer version 6 and older.

I'm guessing it either has to do with a relative position attribute problem or internet explorer's inability to recognize the :hover selector. The top menu row does not use jquery so it works fine in all browsers.

I've already validated the CSS code for the bottom menu and stripped down the submitted homepage to help avoid confusion.

Here's the test site: http://www.capefearvalley.com/test/validate/home/index.html

Here is the page code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Welcome to Cape Fear Valley Health System</title>
 
<link rel="stylesheet" type="text/css" href="../css/rebuild.css" />
<link rel="stylesheet" type="text/css" href="../css/sideMenu.css" />
<link rel="stylesheet" type="text/css" href="../css/jqueryslidemenu.css" />
<link rel="stylesheet" type="text/css" href="../css/rightsideMenu.css" />
 
<!--[if lte IE 7]>
<style type="text/css">
html .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/
</style>
<![endif]-->
 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" src="../js/jqueryslidemenu.js"></script>
 
 
<script type="text/javascript" src="../sideMenu/sideMenu.js" ></script>
<script type="text/javascript">
/* ================================================================ 
This copyright notice must be untouched at all times.
Copyright (c) 2008 Stu Nicholls - stunicholls.com - all rights reserved.
=================================================================== */
/* <![CDATA[ */
$(document).ready(function(){
/* CONFIG */
/* set start (sY) and finish (fY) heights for the list items */
 
sY = 24; /* height of li.sub */
fY = 165; /* height of maximum sub lines * sub line height */
/* end CONFIG */
 
/* open first list item */
animate (fY)
 
$("#slide .sub").click(function() {
	if (this.className.indexOf('clicked') != -1 ) {
		animate(sY)
		$(this)			.removeClass('clicked')
						.css("background", "#fff url(arrows/out.gif) no-repeat 5px 8px")
						.css("color", "#000");
		}
		else {
		animate(sY)
		$('.clicked')	.removeClass('clicked')
						.css("background", "#fff url(arrows/out.gif) no-repeat 5px 8px")
						.css("color", "#000");
		$(this)			.addClass('clicked');
		animate(fY)
	}
});
 
function animate(pY) {
$('.clicked').animate({"height": pY + "px"}, 500);
}
 
$("#slide .sub")		.hover(function(){
$(this)					.css("background", "#ddd url(arrows/down.gif) no-repeat 5px 8px")
						.css("color", "#c00");
},function(){
if (this.className.indexOf('clicked') == -1) {
$(this)					.css("background", "#fff url(arrows/out.gif) no-repeat 5px 8px")
						.css("color", "#000");
}
});
 
});
/* ]]> */
</script>
</head>
 
<body>
   	<div id="container">
    <br style="clear: both" />
 
    	<div id="wrapper">
   	  	  <div class="headerMenuBox">
			<!---------------------------------------- HEADER STARTS -------------------------------------------->		
 
 
			<!--#include file="../include/mainHeader.html" -->
 
 
			<!---------------------------------------- HEADER ENDS --------------------------------------------->
      </div>
 
 
 
 
			<div class="leftMenuBox">
			<!---------------------------------------- SIDE MENU STARTS -------------------------------------------->
 
 
 
 
 
 
 
			<!---------------------------------------- SIDE MENU ENDS --------------------------------------------->
		  </div>
 
 
 
 
 
 
 
 
 
 
			<div class="infoBox">  
 
			<!---------------------------------------- INFOBOXES STARTS -------------------------------------------->
 
 
 
 
			<!---------------------------------------- INFOBOXES ENDS --------------------------------------------->    
 
			</div>
      		<br style="clear: both" />
 
 
 
 
 
 
			<div class="footerBox">
			<!---------------------------------------- FOOTER STARTS -------------------------------------------->
 
 
 
 
 
 
 
			<!---------------------------------------- FOOTER ENDS --------------------------------------------->  
			</div>
 
 
 
 
 
      </div>
    </div>    
</body>
</html>

The embedded main menu html page code:

<link rel="stylesheet" type="text/css" href="../css/rebuild.css" />
<link rel="stylesheet" type="text/css" href="../css/sideMenu.css" />
<link rel="stylesheet" type="text/css" href="../css/jqueryslidemenu.css" />
 
 
<div class="headerWrapper">
	<div class="logoBox">
	</div>
 
    <div class="mainMenuBox">
    		<div class="menuTop">            
            	<ul class="nav">
                    <li><a href="../home/index.html">HOME</a></li>
                    <li class="style1">|</li>
                	<li><a href="../about/index.html">ABOUT US</a></li>
                    <li class="style1">|</li>
                    <li><a href="../contact/index.html">CONTACT US</a></li>
                    <li class="style1">|</li>
                    <li><a href="#">SITE MAP</a></li>
                </ul> 
            </div>
 
            <div class="menuBottom">
            	<div id="myslidemenu" class="jqueryslidemenu">
                    <ul>
                        <li><a href="http://www.capefearcareers.com">EMPLOYMENT</a>
                       </li>
                        <li><a href="../patients/index.html">PATIENTS &amp; VISITORS</a> 
                        		  <ul>
                                  <li><a href="../patients/community_education.html">Community Education Programs</a></li>
                                  <li><a href="../patients/support_groups.html">Support Groups</a></li>
                                  <li><a href="../patients/privacy.html">Notice of Privacy Practices</a></li>
                                  <li><a href="../patients/joint_commission.html">Message From The Joint Commission</a></li>
                                  <li><a href="../directions/index.html">Maps & Directions</a></li>
                                  <li><a href="../downloads/CFV Visitors Guide.pdf">Medical Center Visitor's Guide</a></li>
                                  <li><a href="http://www.health-news-and-information.com/4cfvhs/cfvhs/lib3.shtml">Online Health Information</a></li>
                                  </ul>
                        </li>
                        <li><a href="../about/facilities.html">FACILITIES</a>
                                  <ul>
                                  <li><a href="../about/facilities.html#cfvmc">Cape Fear Valley Medical Center</a></li>
                                  <li><a href="../about/facilities.html#cfvrc">Cape Fear Valley Rehabilitation Center</a></li>
                                  <li><a href="../about/facilities.html#bhc">Behavioral Health Care</a></li>
                                  <li><a href="../about/facilities.html#hrsh">Highsmith-Rainey Specialty Hospital</a></li>
                                  <li><a href="../about/facilities.html#hpn">Health Pavilion North</a></li>
                                  <li><a href="../about/facilities.html#bch">Bladen County Hospital</a></li>
                                  <li><a href="../about/facilities.html#ed">Emergency Department</a></li>
                                  <li><a href="../about/facilities.html#ec">ExpressCare</a></li>
                                  <li><a href="../about/facilities.html#po">Pysician Offices</a></li>
                                  <!--<li><a href="#">Hoke Hospital</a></li>-->
                                  </ul>
                        </li>
                        <li><a href="../foundation/index.html">CHARITABLE GIVING</a>
                        		  <ul>
                                  <li><a href="../foundation/index.html">Welcome</a></li>
                                  <li><a href="../foundation/news.html">News</a></li>
                                  <li><a href="../foundation/fundingneeds.html">Funding Needs</a></li>
                                  <li><a href="../foundation/waystogive.html">Ways to Give</a></li>
                                  <li><a href="../foundation/plannedgiving.html">Gift Planning Guide</a></li>
                                  <li><a href="../foundation/events.html">Events</a></li>
                                  <li><a href="../foundation/recognition.html">Recognition Societies</a></li>
                                  <li><a href="../foundation/friends.html">Friends Group</a></li>
                                  <li><a href="../foundation/faqs.html">FAQs</a></li>
                                  <li><a href="../foundation/contact.html">Contact Us</a></li>
                                  </ul>
                        </li>
                        <li><a href="http://capefearvalley.photobooks.com">FIND A PHYSICIAN</a></li>
                    </ul>
 
               		<br style="clear: left" />
 
                </div>
 
            </div>
    </div>
</div>
    

Here is the default (rebuild).css code:

@charset "utf-8";
/* CSS Document */
 
body {
	text-align: center;
	font-size: 10px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	line-height: 21px;
	text-align: center;
	background-color: #FFFFFF;
	}
 
#container {
	width: 988px;
	height: 3000px;
	margin: 0 auto;
	background-image:url(../images/backgroundMain.jpg);
	background-repeat:no-repeat;
	}
 
#blankContainer {
	width: 988px;
	height: 3000px;
	margin: 0 auto;
	background-image:url(../images/spacer.gif);
	background-repeat:no-repeat;
	}
 
#cancerContainer {
	width: 988px;
	height: 3000px;
	margin: 0 auto;
	background-image: url(../images/backgroundCancer.jpg);
	background-repeat:no-repeat;
	}
 
#neuroContainer {
	width: 988px;
	height: 3000px;
	margin: 0 auto;
	background-image: url(../images/neuro_BG.jpg);
	background-repeat:no-repeat;
	}
 
 
#rehabContainer {
	width: 988px;
	height: 3000px;
	margin: 0 auto;
	background-image: url(../images/rehabBG.jpg);
	background-repeat:no-repeat;
	}
 
#heartContainer {
	width: 988px;
	height: 3000px;
	margin: 0 auto;
	background-image: url(../images/heart_BG.jpg);
	background-repeat:no-repeat;
	}
 
#healthplexContainer {
	width: 988px;
	height: 3000px;
	margin: 0 auto;
	background-image: url(../images/healthplex_BG.jpg);
	background-repeat:no-repeat;
	}
 
#wrapper {
	width: 946px;
	margin: auto;
	text-align: left;
	/*background-color:#666;*/
	margin-top: 0px;
	position:relative;
 top:8px;
 left:0px;
	}
 
.headerMenuBox {
	width: 946px;
	height: 77px;
	}
 
 
/*------------------PICTURE CONTAINER BOXES---------------------*/
 
 
.foundationContainer {
	width: 370px;
	height: 280px;
	float: left;
	margin-right: 16px;
	}
 
 
/*------------------MAIN NAVIGATION BOX---------------------*/
 
.headerWrapper {
	width: 946px;
	height: 77px;
	/*background-color:#F90;*/
	}
 
.logoBox {
	width: 205px;
	height: 77px;
	padding: 0px 0px 0px 0px;
	background-image: url(../images/healthLogo.png);
	float: left;
	/*display: inline;*/
	}
 
.cancerLogoBox {
	width: 205px;
	height: 77px;
	padding: 0px 0px 0px 0px;
	background-image: url(../images/cancerCenterLogo.png);
	float: left;
	/*display: inline;*/
	}
 
.heartLogoBox {
	width: 205px;
	height: 77px;
	padding: 0px 0px 0px 0px;
	background-image: url(../images/heart_logo.png);
	float: left;
	/*display: inline;*/
	}
 
.neuroLogoBox {
	width: 205px;
	height: 77px;
	padding: 0px 0px 0px 0px;
	background-image: url(../images/neuroLogo.png);
	float: left;
	/*display: inline;*/
	}
 
.rehabLogoBox {
	width: 205px;
	height: 77px;
	padding: 0px 0px 0px 0px;
	background-image: url(../images/rehabLogo.png);
	float: left;
	/*display: inline;*/
	}
 
.healthplexLogoBox {
	width: 205px;
	height: 77px;
	padding: 0px 0px 0px 0px;
	background-image: url(../images/healthplex_branding.png);
	float: left;
	/*display: inline;*/
	}
 
.mainMenuBox {
	width: 732px;
	height: 77px;
	float: right;
	/*display: inline;*/
	}
 
.menuTop {
	width: 732px;
	height: 36px;
	font: 10px Verdana, Arial, Helvetica, sans-serif;
	color: #003E71;
	padding: 0px 0px 0px 0px;
	line-height: 36px;
	background-image: url(../images/menu_topBG.png);
	float: right;
	}
 
.menuBottom {
	width: 732px;
	height: 41px;
	float: right;
	background-image: url(../images/menu_bottomBG.png);
	}
 
ul.nav {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
}
 
/*make nave bar display horizontally by floating left*/
ul.nav li {
	float: left;
	white-space: nowrap;
	color: #DBDBDB;
}
 
/*anchor link design by using blocks*/
ul.nav a{
display: block;
padding: 0px 7px;
margin: 0px 8px;
text-decoration: none;
/* top menu font color */
color: #DBDBDB;
}
 
/*removing first link unwanted divider line*/
ul.nav li:first-child a {
  background-image: none;
}
 
/*rollover color*/
ul.nav a:hover,
ul.nav a:focus {
color: white;
}
 
.style1 {color: #003E71}
 
 
/*------------------LEFT MENU BOX---------------------*/
 
.leftMenuBox {
	width: 205px;
	margin-top: 11px;
	float: left;
}
 
.sidebarTop { 
	width: 205px;
  	height: 10px;
  	background: url(../images/curve_top.png) no-repeat top left;
 
}
 
.sidebarBottom { 
	width: 205px;
  	height: 13px;
  	background: url(../images/corner_04.png) no-repeat top left; 
}
 
/*------------------RIGHT MENU BOX---------------------*/
 
.rightMenuBox {
	width: 160px;
	float: right;
	margin-top: 11px;
}
 
/*------------------BANNER BOX-------------------------*/
 
.bannerBox {
	width: 732px;
	height: 177px;
	float: right;
	margin-top: 11px;
}
 
.spacerBox {
	width: 732px;
	height: 290px;
	float: right;
	margin-top: 11px;
}
 
 
/*-----------------MAIN CONTENT BOX-------------------*/
 
.mainContentBox {
	width: 523px;
	font-family: Verdana, Geneva, sans-serif;
	font-size:12px;
	line-height: 24px;
	padding: 5px 20px 0px 15px;
	float: left;
	margin-top: 11px;
	margin-left: 8px;
	}
 
 
.mainContent {
	width: 523px;
	font-family: Verdana, Geneva, sans-serif;
	font-size:12px;
	line-height: 24px;
	padding: 10px 20px 0px 0px;
	float: left;
	}
 
.mainContentBold {
	font-family: Verdana, Geneva, sans-serif;
	font-size:12px;
	font-weight:bold;
	}
 
 
/*-----------------INFO BOX-------------------*/
 
.infoBox {
	width: 100%;
	height: 180px;
	float: left;
	margin-top: 12px;
}
 
.boxHolder {
	width: 205px;
	height: 185px;
	margin-right: 12px;
	float: left;
	background-image:url(../images/infobox.png);
}
 
.roundedbox { 
   	width: 205px;
   	height: 185px;
 
 
}
.roundedboxtop { 
	width: 205px;
  	height: 5px;
  	background: url(../images/corner_01.png) no-repeat top left; 
}
 
.roundedboxcontent {
	background-image:url(../images/corner_02.png);
  	padding: 0px 5px 0px 5px;
	height: 167px;  
}
 
.roundedboxcontentText	 {
	padding: 14px 22px 12px 15px;
	line-height: 16px;
	width: 160px;
}
 
.roundedboxbottom { 
	width: 205px;
  	height: 13px;
  	background: url(../images/corner_04.png) no-repeat top left; 
}
 
 
.boxHolderWide {
	width: 350px;
	height: 185px;
	margin-right: 12px;
	float: left;
	background-image:url(../images/infobox_wide.png);
}
 
.roundedboxWide { 
   	width: 350px;
   	height: 185px;
 
 
}
.roundedboxtopWide { 
	width: 350px;
  	height: 5px;
  	background: url(../images/corner_01wide.png) no-repeat top left; 
}
 
.roundedboxcontentWide {
	background-image:url(../images/corner_02wide.png);
  	padding: 0px 5px 0px 5px;
	height: 167px;
}
 
.roundedboxbottomWide { 
	width: 350px;
  	height: 13px;
  	background: url(../images/corner_04wide.png) no-repeat top left; 
}
 
 
 
/*-----------------FOOTER BOX-------------------------*/
 
 
 
.footerBox {
	width: 946px;
	height: 26px;
	font-size:9px;
	overflow: hidden;
	color:#bfbfbf;
	margin-top: 0px;
	position:relative;
 	top:28px;
 	left:0px;
	}
 
 
 
 
/*-----------------FONT CODE--------------------------*/
 
p {
	/* color used to differentiate the different paragraphs */
	color: black;
	background-color: transparent;
	margin-top: 10px;
	margin-bottom: 10px;
	font-size: 12px;
	line-height: 24px;
}
 
.smallSmallHead {
	color: #999;
	font-weight: bold;
	font-style: normal;
	margin-top: 8px;
}
 
 
.heads {
	color: #0087bc;
	font-size: 21px;
	font-weight: normal;
	margin-bottom: 0px;
	line-height: 24px;
}
 
.smallheads {
	color: #0087bc;
	font-size: 14px;
	line-height: 44px;
	font-weight: normal;
	font-family: Verdana, Geneva, sans-serif;
}
 
.mediumheads {
	color: #0087bc;
	font-size: 21px;
	line-height: 40px;
	font-weight: normal;
	font-family: Verdana, Geneva, sans-serif;
}
 
.mediumheadsNoPic {
	color: #0087bc;
	font-size: 21px;
	line-height: 40px;
	font-weight: normal;
	font-family: Verdana, Geneva, sans-serif;
}	
 
.contactText {
	line-height: 24px;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 11px;
}
 
 
.wrapper .content .primary .textBody p strong {
	color: #000;
	font-size: 12px;
}
 
 
a {
	color: #0087Bc;
	text-decoration: none;
	}
a:hover {
	color:#09F;
	text-decoration: none;
	}
/*a:visited {
	color: #AFBC21;
	text-decoration: none;
	}*/
.adminTitle {
	font-size: 9px;
	font-style: normal;
	line-height: 12px;
	font-weight: normal;
}
.adminName {
	font-size: 12px;
	font-weight: bold;
	line-height: 20px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
}
 
.subHeads {
	font-size: 16px;
	color: #0087bc;
	line-height: 21px;
}
 
.locationHead {
	font-size: 16px;
	color: #0087bc;
}
 
.tinyText {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 10px;
}
 
.inner {
	padding:0 40px;
}
#content .blog {
	float:left;
	width:219px;
	padding-bottom:20px;
	padding-right:20px;
}
#content .blog h2 {
	float:left;
	font-size:24px;
	padding-bottom:10px;
	padding-left:27px;
}
#content .blog p {
	width:190px;
}

Here is the jquery slidemenu css:

.jqueryslidemenu{
width: 732px;
	font: 12px Verdana, Arial, Helvetica, sans-serif;
	font-weight: bold;
	color: #003E71;
	padding: 0px 0px 0px 0px;
	margin-top: 0px;
	line-height: 25px;
	height: 41px;
	/*background-image:url(../images/menu_bottomBG.png);	*/
}
 
.jqueryslidemenu ul{
position: relative;
margin: 0;
padding: 0;
list-style-type: none;
}
 
/*Top level list items*/
.jqueryslidemenu ul li{
position: relative;
display: inline;
float: left;
}
 
/*Top level menu link items style*/
.jqueryslidemenu ul li a{
display: block;
background: none;
color: white;
padding: 8px 10px;
margin: 0px 0px;
/*border-right: 1px solid #778;*/
color: #003E71;
text-decoration: none;
}
 
* html .jqueryslidemenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;
}
 
.jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{
/*color: white;*/
color: 003e71;
}
 
.jqueryslidemenu ul li a:hover{
background: #99cc33; /*tab link background during hover state*/
color: white;
}
 
/*1st sub level menu*/
.jqueryslidemenu ul li ul{
position: absolute;
left: 0;
display: block;
background: #C9E207;
visibility: hidden;
/* This is the third level down menu positioning goes*/
margin: 0px 0px;
}
 
/*Sub level menu list items (undo style from Top level List Items)*/
.jqueryslidemenu ul li ul li{
display: list-item;
float: none;
}
 
/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.jqueryslidemenu ul li ul li ul{
top: 0;
}
 
/* Sub level menu links style */
.jqueryslidemenu ul li ul li a{
font: normal 12px Verdana, Arial, Helvetica, sans-serif;
width: 160px; /*width of sub menus*/
padding: 5px;
margin: 0;
border-top-width: 0;
border-bottom: 1px #33FF00;
}
 
.jqueryslidemenuz ul li ul li a:hover{ /*sub menus hover style*/
background: white;
color: black;
}
 
/* ######### CSS classes applied to down and right arrow images  ######### */
 
.downarrowclass{
position: absolute;
top: 12px;
right: 7px;
}
 
.rightarrowclass{
position: absolute;
top: 6px;
right: 5px;
}

The jQuery slide menu code:

/*********************
//* jQuery Multi Level CSS Menu #2- By Dynamic Drive: <a href="http://www.dynamicdrive.com/
//*" rel="nofollow">http://www.dynamicdrive.com/
//*</a> Last update: Nov 7th, 08': Limit # of queued animations to minmize animation stuttering
//* Menu avaiable at DD CSS Library: <a href="http://www.dynamicdrive.com/style/
*********************/
 
//Specify" rel="nofollow">http://www.dynamicdrive.com/style/
*********************/
 
//Specify</a> full URL to down and right arrow images (23 is padding-right to add to top level LIs with drop downs):
var arrowimages={down:['downarrowclass', 'down.gif', 23], right:['rightarrowclass', 'right.gif']}
 
var jqueryslidemenu={
 
animateduration: {over: 200, out: 100}, //duration of slide in/ out animation, in milliseconds
 
buildmenu:function(menuid, arrowsvar){
	jQuery(document).ready(function($){
		var $mainmenu=$("#"+menuid+">ul")
		var $headers=$mainmenu.find("ul").parent()
		$headers.each(function(i){
			var $curobj=$(this)
			var $subul=$(this).find('ul:eq(0)')
			this._dimensions={w:this.offsetWidth, h:this.offsetHeight, subulw:$subul.outerWidth(), subulh:$subul.outerHeight()}
			this.istopheader=$curobj.parents("ul").length==1? true : false
			$subul.css({top:this.istopheader? this._dimensions.h+"px" : 0})
 
 
			$curobj.hover(
				function(e){
					var $targetul=$(this).children("ul:eq(0)")
					this._offsets={left:$(this).offset().left, top:$(this).offset().top}
					var menuleft=this.istopheader? 0 : this._dimensions.w
					menuleft=(this._offsets.left+menuleft+this._dimensions.subulw>$(window).width())? (this.istopheader? -this._dimensions.subulw+this._dimensions.w : -this._dimensions.w) : menuleft
					if ($targetul.queue().length<=1) //if 1 or less queued animations
						$targetul.css({left:menuleft+"px", width:this._dimensions.subulw+'px'}).slideDown(jqueryslidemenu.animateduration.over)
				},
				function(e){
					var $targetul=$(this).children("ul:eq(0)")
					$targetul.slideUp(jqueryslidemenu.animateduration.out)
				}
			) //end hover
		}) //end $headers.each()
		$mainmenu.find("ul").css({display:'none', visibility:'visible'})
	}) //end document.ready
}
}
 
//build menu with ID="myslidemenu" on page:
jqueryslidemenu.buildmenu("myslidemenu", arrowimages)

Thanks ahead of time for any help that you can provide.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 38 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Should find your answer here

Should find your answer here I think: http://css-class.com/articles/explorer/sticky/index.htm

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference