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.
<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"> </a>
<a href="/passion" class="menuabout2"> </a>
<a href="/community" class="menuabout3"> </a>
<a href="/stuff" class="menuabout4"> </a>
<a href="/employment" class="menuabout5"> </a>
<a href="/donations" class="menuabout6"> </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;
}
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.
<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"> </a>
<a href="/passion" class="menuabout2"> </a>
<a href="/community" class="menuabout3"> </a>
<a href="/stuff" class="menuabout4"> </a>
<a href="/employment" class="menuabout5"> </a>
<a href="/donations" class="menuabout6"> </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;
}