CSS - Text Shifts On Hover

I have this little menu on this site:

http://kris.dreamhosters.com/mhw/

When I view it in IE6 it is shifted to the left several pixels. Upon hovering over it, it shifts to where it belongs. I've done some search both here and on google and just can't find an answer. Fortunately it doesn't seem to do this in IE7, but I still like my pages to work in IE6. Any insight greatly appreciated.

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.

I can provide the site for reference 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;
}

i have a div tag absolutely positioned and inside that tag i ONLY have an image.

so if place it in some code like this:

Code:

<tr><td><div id="thetag"><img src="asdf.gif" width="10" height="20"></div></td></tr>

and following that right away, if i have another table row with whatever in it:

Code:

<tr><td>asdf</td></tr>

then what happens is that second row gets shifted up and gets put in place under the first row, making the image overlap the 'asdf'.

if i put at least one char after the image in the div, its fine and the second row will follow under the image on a new line like it should, but i dont want any text in there.

any ideas?

thanks

Alright, here is what I have.

Code:

<font color="red">Discover</font> <font color="white">Laos</font><br>
	<font color="red">Discover</font> <font color="white">Politics</font><br>
	<font color="red">Discover</font> <font color="white">People</font><br>
	<font color="red">Discover</font> <font color="white">Art</font><br>
	<font color="red">Discover</font> <font color="white">Food</font><br>

What I want is for each Discover Something to be a link, and when hovered over, the red "Discover" will change to white and the "Something" will change to red.

HELP!!

Hi there,

How do I make the background of a text field change color upon hover/rollover?

Any help would be great!