ie6 float shifts on hover

**cchill** · 12-09-2008, 07:46 PM

I have been dealing with this issue for a while now and I don't know if I just can't see it or maybe I just don't know what I'm doing.

In IE6, the div #primary is shifted almost off the screen to the left (or to the outside of the wrapper on the right), but on hover it shifts to the correct position. It works fine in FF2, FF3, safari 3.x and ie7.

I have tried so many things it would be too much to list. I've read about all kinds of IE hacks and tried most of them (holly hack, inline hack, hasLayout, etc) that I thought pertained to the issue. Maybe I didn't use them properly, i don't know at this point.

All of the code is a modified wordpress theme, sandbox, which i have customized for this particular layout.

I have left a black box around the affected div for testing purposes. If you look on the homepage you will see the div stuck off the left of the page (or right, i haven't been able to figure out what causes it to choose a side), as i have removed the links again for testing purposes. It will only shift if there are links or something to invoke the hover. Once the div has been redrawn in IE6 and moved to its correct position, it seems to stay where it should on subsequent pages.

the html code is selected from /about

I can supply the site link if needed.

thanks for any help at this point.

Code:

<div id="container">
		<div id="content-2">


			<div id="post-25" class="hentry p1 page publish author-admin category-uncategorized untagged y2008 m11 d10 h16">
				<h2 class="entry-title"></h2>
				<div class="entry-content">
<p>Life happens in the kitchen. That’s our belief, and we’re sticking to it.</p>
<p>For the past 35 years, Cooks has been the Twin Cities’ industry leader in all things culinary. We were the first cooking school to bring nationally recognized chefs and cookbook writers to the Twin Cities, the first retail store to incorporate cooking classes and the first specialty gourmet store to directly import culinary products.</p>
<p>And those won’t be our last firsts. We’re constantly growing, changing and challenging ourselves to bring the best products and experiences the food world has to offer to our customers.</p>



				</div>
			</div><!-- .post -->


		</div><!-- #content -->
	</div><!-- #container -->

	<div id="primary" class="sidebar">
		<ul class="xoxo">
		
			<li id="text-285739111" class="widget widget_text">						<div class="textwidget"><a href="/history" class="menuabout1">&nbsp;</a>
<a href="/passion" class="menuabout2">&nbsp;</a>
<a href="/community" class="menuabout3">&nbsp;</a>
<a href="/stuff" class="menuabout4">&nbsp;</a>
<a href="/employment" class="menuabout5">&nbsp;</a>
<a href="/donations" class="menuabout6">&nbsp;</a></div>
		
			</li>
		</ul>
	</div><!-- #primary .sidebar -->

	<div id="secondary" class="sidebar">
		<ul class="xoxo">
		
			<li id="text-273708591" class="widget widget_text">						<div class="textwidget"><ul id="aboutpanel">
 <li id="aboutbut1"><a href="/history"></a></li>
 <li id="aboutbut2"><a href="/community"></a></li>
 </ul>
<ul id="aboutpanelb">
<li id="aboutbut3"><a href="/passion"></a></li>
<li id="aboutbut4"><a href="/stuff"></a></li>
<ul></div>
		
			</li>
		</ul>
	</div><!-- #secondary .sidebar -->

here is the CSS, i use a separate ie6 css file, i have combined all CSS for easy viewing.

Code:

div#wrapper {
	width: 914px;
	margin: 12px auto 20px auto;
	padding: 0px;
}

* html div#primary {
	position:relative;
}


/*  CONTENT AND WIDGETS FORMATTING  */

div#container {
	float:left;
	width:914px;
}
 
div#content {               /* homepage template  USED BY HOME PAGE*/
	height:1%;
	margin-top: -18px;
	margin-right: 40px;
	margin-bottom: 0;
	margin-left: 200px;
}

div#content-2 {             /* secondary template  USED BY ABOUT PAGE */
	height:1%;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 8pt;
	color: #333333;
	margin-top: 20px;
	margin-right: 380px;
	margin-bottom: 0;
	margin-left: 260px;
}

div#content-3 {             /* tertiary template */
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 8pt;
	color: #333333;
	margin-top: 0;
	margin-right: 200px;
	margin-bottom: 0;
	margin-left: 200px;
}

div.sidebar {
	float:left;
	overflow:hidden;
}

div#primary {
	width:200px;
	margin-top: 18px;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: -98%;
}

div#secondary {
	width:315px;
	margin-top: 8px;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: -370px;
}

div.sidebar li {
	list-style:none;
	margin:0 0 2em;
}

div.sidebar li form {
	margin:0.2em 0 0;
	padding:0;
}

div.sidebar ul ul {
	margin:0 0 0 1em;
}

div.sidebar ul ul li {
	list-style:none;
	margin:0;
}

div.sidebar ul ul ul {
	margin:0 0 0 0.5em;
}

div.sidebar ul ul ul li {
	list-style:none;
}

div.sidebar div, div.sidebar ul {
	margin:0;
	padding:0;
}

**Snookerman** · 12-09-2008, 08:52 PM

This might cause the problem, you have an open tag instead of a close tag:

Code:

<ul id="aboutpanelb">
<li id="aboutbut3"><a href="/passion"></a></li>
<li id="aboutbut4"><a href="/stuff"></a></li>
<ul>

**cchill** · 12-10-2008, 05:02 PM

Originally Posted by Snookerman

This might cause the problem, you have an open tag instead of a close tag:

Code:

<ul id="aboutpanelb">
<li id="aboutbut3"><a href="/passion"></a></li>
<li id="aboutbut4"><a href="/stuff"></a></li>
<ul>

I closed that with no change. Thanks for catching that. I'm learning that using W3 validation can be a great debugging tool.

**Snookerman** · 12-10-2008, 05:09 PM

I tested the code you posted and I didn't have the problems you were talking about. Could you please post the entire code, including the head section and any .js files you use.

**cchill** · 12-10-2008, 05:36 PM

I removed site specific URLs to prevent search engines from turning up my site, but didn't touch any of the code

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" dir="ltr" lang="en-US">
<head profile="http://gmpg.org/xfn/11">
	<link rel="shortcut icon" href="favicon.ico" />
	<title>page title</title>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	<link rel="stylesheet" type="text/css" href="style.css" />
    <!--[if IE 6]>
<link href="ie6.css" rel="stylesheet" type="text/css" />
<![endif]--> 
    <!--[if IE 7]>
<link href="ie7.css" rel="stylesheet" type="text/css" />
<![endif]--> 
	

	<link rel="alternate" type="application/rss+xml" href="/feed" title="pages feed" />
	<link rel="alternate" type="application/rss+xml" href="/comments/feed" title="comments feed" />
</head>

<body class="wordpress y2008 m12 d10 h11 home page pageid-8 page-author-admin page-template page-template-default">

<div id="wrapper" class="hfeed">


<!--  MENU  -->
<div id="menu">
<ul id="nav">
	
    	<li class="top"><a href="/home" class="home"><img src="/wp-content/themes/cochv3/images/logo-sm.gif" alt="Logo" border="0" /><!--[if gte IE 7]><!--></a><!--<![endif]-->
		<!--[if lte IE 6]><table><tr><td><![endif]-->
		<!--[if lte IE 6]></td></tr></table></a><![endif]-->
	</li>
    
  <li class="top"><a href="/about" class="about"><!--[if gte IE 7]><!--></a><!--<![endif]-->
		<!--[if lte IE 6]><table><tr><td><![endif]-->
		<ul class="sub">
        
			<li><a href="/history" class="a1"></a></li>
			<li><a href="/passion" class="a2"></a></li>
			<li><a href="/community" class="a3"></a></li>
			<li><a href="/stuff" class="a4"></a></li>
            <li><a href="/employment" class="a5"></a></li>
            <li><a href="/donations" class="a6"></a></li>
		</ul>
		<!--[if lte IE 6]></td></tr></table></a><![endif]-->
	</li>
	<li class="top"><a href="/school" class="classes"><!--[if gte IE 7]><!--></a><!--<![endif]-->

		<!--[if lte IE 6]><table><tr><td><![endif]-->
		<ul class="sub">
        
			<li><a href="/philosophy" class="c1"></a></li>
			<li><a href="/schedule" class="c2"></a></li>
			<li><a href="/liferecipe" class="c3"></a></li>
			<li><a href="/chefs" class="c4"></a></li>
			<li><a href="/snap" class="c5"></a></li>
		</ul>
		<!--[if lte IE 6]></td></tr></table></a><![endif]-->
	</li>

	<li class="top"><a href="/shopcooks" class="retail"><!--[if gte IE 7]><!--></a><!--<![endif]-->
		<!--[if lte IE 6]><table><tr><td><![endif]-->
		<ul class="sub">

			<li><a href="/stories" class="s1"></a></li>
			<li><a href="/store" class="s2"></a></li>
			<li><a href="/picks" class="s3"></a></li>
			<li><a href="/seasonal" class="s4"></a></li>
			<li><a href="/specials" class="s5"></a></li>
		</ul>
		<!--[if lte IE 6]></td></tr></table></a><![endif]-->
	</li>
    
    
	<li class="top"><a href="/events" class="events"><!--[if gte IE 7]><!--></a><!--<![endif]-->
		<!--[if lte IE 6]><table><tr><td><![endif]-->
	    <ul class="sub">

			<li><a href="/corp" class="e1"></a></li>
			<li><a href="/social" class="e2"></a></li>
			<li><a href="/meetings" class="e3"></a></li>
			<li><a href="/catering" class="e4"></a></li>
			<li><a href="/bridal" class="e5"></a></li>            
            <li><a href="/menus" class="e6"></a></li>
            <li><a href="/gifts" class="e7"></a></li>
		</ul>
		<!--[if lte IE 6]></td></tr></table></a><![endif]-->
	</li>
    
    
	<li class="top"><a href="/cropshare" class="crop"><!--[if gte IE 7]><!--></a><!--<![endif]-->
		<!--[if lte IE 6]><table><tr><td><![endif]-->
		<ul class="sub">

			<li><a href="/shares" class="cs1"></a></li>
		</ul>
		<!--[if lte IE 6]></td></tr></table></a><![endif]-->
	</li>
    
    
	<li class="top"><a href="/registry" class="giftreg"><!--[if gte IE 7]><!--></a><!--<![endif]-->
		<!--[if lte IE 6]><table><tr><td><![endif]-->
	    <ul class="sub">

			<li><a href="/register" class="g1"></a></li>
			<li><a href="/findreg" class="g2"></a></li>
		</ul>
		<!--[if lte IE 6]></td></tr></table></a><![endif]-->
	</li>


<!--  SEARCH BOX  -->

<div id="searchform">	
	   <form method="get" action="http://mysite.com"> <img src="/wp-content/themes/cochv3/images/search.gif" alt="Search Button"/>
				<input id="s" name="s" type="text" class="searchbox" value="" size="10" tabindex="1" />
				<input type="image" src="/wp-content/themes/cochv3/images/searchbutton.gif" value="Find" tabindex="2" />
			</form>
</div>

</ul>

</div>


<div id="about"> <!-- An alternative header is defined, based on the page title -->
</div>


	<div id="container">
		<div id="content-2">


			<div id="post-25" class="hentry p1 page publish author-admin category-uncategorized untagged y2008 m11 d10 h16">
				<div class="entry-content">
<p>content</p>
<p>content content</p>
<p>content content content</p>



				</div>
			</div><!-- .post -->


		</div><!-- #content -->
	</div><!-- #container -->

	<div id="primary" class="sidebar">
		
	<div class="textwidget"><a href="/history" class="menuabout1">&nbsp;</a>
<a href="/passion" class="menuabout2">&nbsp;</a>
<a href="/community" class="menuabout3">&nbsp;</a>
<a href="/stuff" class="menuabout4">&nbsp;</a>
<a href="/employment" class="menuabout5">&nbsp;</a>
<a href="/donations" class="menuabout6">&nbsp;</a></div>
			
	</div><!-- #primary .sidebar -->

	<div id="secondary" class="sidebar">
		
								<div class="textwidget"><ul id="aboutpanel">
 <li id="aboutbut1"><a href="/history"></a></li>
 <li id="aboutbut2"><a href="/community"></a></li>
 </ul>
<ul id="aboutpanelb">
<li id="aboutbut3"><a href="/passion"></a></li>
<li id="aboutbut4"><a href="/stuff"></a></li>
</ul></div>
			
	</div><!-- #secondary .sidebar -->

	<div id="footer">
		 <p>&nbsp;</p>
		 <p><a href="/contact">Contact Us</a> | <a href="/directions">Directions</a> | <a href="/sitemap">Site Map</a> | <a href="/privacy">Privacy Policy</a> | <a href="/cancellation">Cancellation/Refund Policy</a> | <a href="/newsletter">Newsletter</a><br />
	Footer Content<br />
	Copyright &copy; 2008 , All Rights Reserved | <a href="/rss2">RSS</a> </p>
</div><!-- #footer -->

</div><!-- #wrapper .hfeed -->

<script src="http://stats.wordpress.com/e-200850.js" type="text/javascript"></script>
<script type="text/javascript">
st_go({blog:'4825563',v:'ext',post:'25'});
var load_cmc = function(){linktracker_init(4825563,25,2);};
if ( typeof addLoadEvent != 'undefined' ) addLoadEvent(load_cmc);
else load_cmc();
</script>

</body>
</html>

**bluewalrus** · 12-10-2008, 07:26 PM

Haha opps i was wrong missed part of that i recant my post

Thread: ie6 float shifts on hover

Thread Tools

Search Thread

ie6 float shifts on hover

Bookmarks

Bookmarks

Posting Permissions