PDA

View Full Version : ie6 float div shifts on hover



cchill
Dec 9th, 2008, 06:17 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 provide the site if needed to see the issue in action

thanks for any help at this point.


<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.




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;
}

BoldUlysses
Dec 9th, 2008, 07:53 PM
A site link would be helpful. I don't see anything in either your HTML or CSS that would even cause behavior on hover (Javascript or the :hover pseudo-class in CSS).

cchill
Dec 9th, 2008, 08:38 PM
http://dev.cooksofcrocushill.com

here is the CSS for the menu that is jumping, maybe it will shed some light.



a.menuhome1 {
width: 190px;
height: 17px;
background: url(images/menu-home/about.gif) 0 0 no-repeat;
text-decoration: none;
display: block;
}

a:hover.menuhome1 {
background-position: 0 -17px;
}

a.menuhome2 {
width: 190px;
height: 17px;
background: url(images/menu-home/school.gif) 0 0 no-repeat;
text-decoration: none;
display: block;
}

a:hover.menuhome2 {
background-position: 0 -17px;
}

a.menuhome3 {
width: 190px;
height: 17px;
background: url(images/menu-home/shop.gif) 0 0 no-repeat;
text-decoration: none;
display: block;
}

a:hover.menuhome3 {
background-position: 0 -17px;
}

a.menuhome4 {
width: 190px;
height: 17px;
background: url(images/menu-home/event.gif) 0 0 no-repeat;
text-decoration: none;
display: block;
}

a:hover.menuhome4 {
background-position: 0 -17px;
}

a.menuhome5 {
width: 190px;
height: 17px;
background: url(images/menu-home/cropshare.gif) 0 0 no-repeat;
text-decoration: none;
display: block;
}

a:hover.menuhome5 {
background-position: 0 -17px;
}

a.menuhome6 {
width: 190px;
height: 17px;
background: url(images/menu-home/giftreg.gif) 0 0 no-repeat;
text-decoration: none;
display: block;
}

a:hover.menuhome6 {
background-position: 0 -17px;
}

a.menuhome7 {
width: 190px;
height: 17px;
background: url(images/menu-home/press.gif) 0 0 no-repeat;
text-decoration: none;
display: block;
}

a:hover.menuhome7 {
background-position: 0 -17px;
}

Excavator
Dec 9th, 2008, 09:19 PM
Hello cchill,
I'm confused why the huge negative margin...

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

Excavator
Dec 9th, 2008, 09:30 PM
Just put some colors on there and see what it's doing:

#homehead {
background: #ccc url(../images/test-intro.jpg);
width: 873px;
height:372px;
margin-left:auto;
margin-right:auto;
}
#container {
float:left;
width:914px;
background: #666666;
}
#content { /* homepage template */
margin-top: -18px;
margin-right: 40px;
margin-bottom: 0;
margin-left: 200px;
background: #fff;}
#primary {
background: #000;
width:200px;
margin-top: 18px;
margin-right: 0;
margin-bottom: 0;
margin-left: -98%;
}





The way things are overlapping it looks like you need to adjust your box model (http://www.w3.org/TR/CSS2/box.html) and I would figure another way of positioning that div other than negative margins.

Have you checked the validator? Some things it points out could be fixed.

.

cchill
Dec 9th, 2008, 10:09 PM
Excavator

thanks for the tip to color the divs, i dont know why i didn't think about that. it makes trouble shooting a lot easier. i'll read up on the box model and see where that gets me.

thanks for the quick reply

Excavator
Dec 9th, 2008, 11:38 PM
the tip to color the divs, i dont know why i didn't think about that. it makes trouble shooting a lot easier.


MUCH better than adding a border to show your divs. Seems a lot of people suggest a border but, since it adds to the width, a border can actually cause problems that weren't there before you started debugging.