KDLA
12-08-2008, 11:19 AM
On "hover" the layout (of the tagline, middle and content divs, and nav) shifts to the left in IE6 - anyone know why?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript"><!--//--><![CDATA[//><!--
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=(this.className.length>0? " ": "") + "sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"), "");
}
}
}
mcAccessible = function() {
var mcEls = document.getElementById("nav").getElementsByTagName("A");
for (var i=0; i<mcEls.length; i++) {
mcEls[i].onfocus=function() {
this.className+=(this.className.length>0? " ": "") + "sffocus"; //a:focus
this.parentNode.className+=(this.parentNode.className.length>0? " ": "") + "sfhover"; //li < a:focus
if(this.parentNode.parentNode.parentNode.nodeName == "LI") {
this.parentNode.parentNode.parentNode.className+=(this.parentNode.parentNode.parentNode.className.le ngth>0? " ": "") + "sfhover"; //li < ul < li < a:focus
if(this.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName == "LI") {
this.parentNode.parentNode.parentNode.parentNode.parentNode.className+=(this.parentNode.parentNode.p arentNode.parentNode.parentNode.className.length>0? " ": "") + "sfhover"; //li < ul < li < ul < li < a:focus
}
}
}
mcEls[i].onblur=function() {
this.className=this.className.replace(new RegExp("( ?|^)sffocus\\b"), "");
this.parentNode.className=this.parentNode.className.replace(new RegExp("( ?|^)sfhover\\b"), "");
if(this.parentNode.parentNode.parentNode.nodeName == "LI") {
this.parentNode.parentNode.parentNode.className=this.parentNode.parentNode.parentNode.className.repl ace(new RegExp("( ?|^)sfhover\\b"), "");
if(this.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName == "LI") {
this.parentNode.parentNode.parentNode.parentNode.parentNode.className=this.parentNode.parentNode.par entNode.parentNode.parentNode.className.replace(new RegExp("( ?|^)sfhover\\b"), "");
}
}
}
}
}
// only ie needs the sfHover script. all need the accessibility script...
// thanks http://www.brothercake.com/site/resources/scripts/onload/
if(window.addEventListener) window.addEventListener('load', mcAccessible, false); // gecko, safari, konqueror and standard
else if(document.addEventListener) document.addEventListener('load', mcAccessible, false); // opera 7
else if(window.attachEvent) { // win/ie
window.attachEvent('onload', sfHover);
window.attachEvent('onload', mcAccessible);
} else { // mac/ie5
if(typeof window.onload == 'function') {
var existing = onload;
window.onload = function() {
existing();
sfHover();
mcAccessible();
}
} else {
window.onload = function() {
sfHover();
mcAccessible();
}
}
}
//--><!]]></script>
<style type="text/css">
* {margin: 0; padding: 0;}
body {background: #003333; font-size: 10px; padding: 1% 10%;}
#maincontainer {}
#nav, #nav ul {list-style: none;}
#nav li {float: left; width: 20%; display: block;}
#nav li a {display: block; background: #eee;}
#nav li ul {position: absolute; width: 13em; margin-left: -1000em;}
#nav li ul li {width: 13em;}
#nav li ul ul {margin: -1em 0 0 -1000em;}
#nav li:hover ul ul, #nav li.sfhover ul ul {margin-left: -1000em;}
#nav li:hover ul, #nav li.sfhover ul {margin-left: 0;}
#nav li li:hover ul, #nav li li.sfhover ul {margin-left: 13em;}
#nav li a:focus + ul { margin-left: 0; }
#nav li li a:focus + ul { margin-left: 1013em; }
#nav li li a:focus { margin-left:1000em; width:13em;}
#nav li li li a:focus {margin-left: 2013em; width: 13em;}
#nav li:hover a:focus, #nav li.sfhover a.sffocus { margin-left: 0; }
#nav li li:hover a:focus + ul, #nav li li.sfhover a.sffocus + ul { margin-left: 13em; }
#middle {background: #fff; padding: 1%; clear: left;}
#right {float: right; width: 25%;}
#content {float: left; width: 75%;}
</style>
<!--[if IE 6]>
<style type="text/css">
#middle {width: 98%;}
#right: width: 24%;}
#content {width: 74%;}
</style>
<![endif]-->
</head>
<body>
<div id="maincontainer">
<h1>Heading 1</h1>
<p>Tagline</p>
<ul id="nav">
<li><a href="">Link 1</a>
<ul>
<li><a href="">Link 1</a></li>
<li><a href="">Link 2</a></li>
<li><a href="">Link 3</a></li>
</ul>
</li>
<li><a href="">Link 2</a>
<ul>
<li><a href="">Link 1</a></li>
<li><a href="">Link 2</a></li>
<li><a href="">Link 3</a></li>
</ul>
</li>
<li><a href="">Link 3</a>
<ul>
<li><a href="">Link 1</a></li>
<li><a href="">Link 2</a></li>
<li><a href="">Link 3</a></li>
</ul>
</li>
<li><a href="">Link 4</a>
<ul>
<li><a href="">Link 1</a></li>
<li><a href="">Link 2</a></li>
<li><a href="">Link 3</a></li>
</ul>
</li>
<li><a href="">Link 5</a>
<ul>
<li><a href="">Link 1</a></li>
<li><a href="">Link 2</a></li>
<li><a href="">Link 3</a></li>
</ul>
</li>
</ul>
<div id="middle">
<div id="content">
<p>
*** sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In mauris mauris, sagittis at, lobortis eget, elementum eget, elit. Ut vitae ligula. In risus. In enim nulla; consequat ut, consequat et, luctus ac, quam. Ut mattis elit at odio. Vivamus sed augue sit amet ligula vestibulum molestie? Vivamus at magna et nisi fermentum elementum. Etiam porta tortor ut massa. Praesent id enim a mi lacinia mattis? Curabitur at dui! Nulla lacus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas mauris urna, posuere quis, accumsan non, ornare et; ligula. Vestibulum risus justo, suscipit ac, mattis non, feugiat quis, massa. Vestibulum massa risus, pharetra aliquam, eleifend dictum, molestie sit amet, nulla. Suspendisse posuere, felis vel iaculis suscipit, neque massa porta justo, ut ullamcorper dui nisl tincidunt mauris. Nullam in quam sed nisi hendrerit molestie. Quisque eu turpis non arcu porta sollicitudin. Sed id massa id est varius hendrerit.
</p>
<p>
Aliquam orci augue, scelerisque vel, gravida eu, pellentesque a; est. Suspendisse potenti. Aenean et dui a diam mattis posuere. Nam in mauris. Aliquam sem nibh, lobortis ornare, pharetra eget, facilisis at, tellus. Praesent ultricies facilisis neque. Nullam feugiat, neque in fringilla adipiscing, velit leo tincidunt felis, ut mattis felis orci ut elit. Aliquam eget dui sit amet dui luctus sollicitudin. Fusce ullamcorper vestibulum nisi. Mauris adipiscing luctus elit. Phasellus sed sem sed urna auctor varius! Etiam odio nunc, egestas at, elementum sed, ultricies eget; neque? Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec egestas. Pellentesque felis neque, elementum posuere, commodo et, commodo vitae, mauris! Praesent a pede a velit laoreet elementum. Aenean laoreet, lacus a lobortis tempor, dui est sagittis augue, id venenatis tellus mauris placerat nunc.
</p>
<p>
Pellentesque mauris eros, tempor sit amet, blandit in, suscipit nec, lacus. In nisi metus, ullamcorper ut, condimentum ut, viverra non, augue. Cras mauris? Integer suscipit accumsan risus. Aliquam eget sem? In hac habitasse platea dictumst. Nam fermentum tellus sed felis. Nullam consequat condimentum nisl. Aliquam convallis, eros sit amet condimentum sagittis, ipsum purus lobortis est, eget pulvinar leo nisi in tellus? Curabitur facilisis erat nec leo. Pellentesque vitae purus at diam rutrum laoreet. Aliquam commodo neque ut nunc. Donec leo sem, facilisis a, gravida sed; tristique vitae, purus. Donec ante lorem, venenatis vel, mattis vitae, pulvinar nec, urna. Curabitur laoreet sem eget nisi faucibus sagittis.
</p>
</div>
<div id="right">
<p>
*** sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In mauris mauris, sagittis at, lobortis eget, elementum eget, elit. Ut vitae ligula. In risus. In enim nulla; consequat ut, consequat et, luctus ac, quam. Ut mattis elit at odio. Vivamus sed augue sit amet ligula vestibulum molestie? Vivamus at magna et nisi fermentum elementum. Etiam porta tortor ut massa. Praesent id enim a mi lacinia mattis? Curabitur at dui! Nulla lacus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas mauris urna, posuere quis, accumsan non, ornare et; ligula. Vestibulum risus justo, suscipit ac, mattis non, feugiat quis, massa. Vestibulum massa risus, pharetra aliquam, eleifend dictum, molestie sit amet, nulla. Suspendisse posuere, felis vel iaculis suscipit, neque massa porta justo, ut ullamcorper dui nisl tincidunt mauris. Nullam in quam sed nisi hendrerit molestie. Quisque eu turpis non arcu porta sollicitudin. Sed id massa id est varius hendrerit.
</p>
</div>
<hr style="clear: both;" />
</div>
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript"><!--//--><![CDATA[//><!--
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=(this.className.length>0? " ": "") + "sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"), "");
}
}
}
mcAccessible = function() {
var mcEls = document.getElementById("nav").getElementsByTagName("A");
for (var i=0; i<mcEls.length; i++) {
mcEls[i].onfocus=function() {
this.className+=(this.className.length>0? " ": "") + "sffocus"; //a:focus
this.parentNode.className+=(this.parentNode.className.length>0? " ": "") + "sfhover"; //li < a:focus
if(this.parentNode.parentNode.parentNode.nodeName == "LI") {
this.parentNode.parentNode.parentNode.className+=(this.parentNode.parentNode.parentNode.className.le ngth>0? " ": "") + "sfhover"; //li < ul < li < a:focus
if(this.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName == "LI") {
this.parentNode.parentNode.parentNode.parentNode.parentNode.className+=(this.parentNode.parentNode.p arentNode.parentNode.parentNode.className.length>0? " ": "") + "sfhover"; //li < ul < li < ul < li < a:focus
}
}
}
mcEls[i].onblur=function() {
this.className=this.className.replace(new RegExp("( ?|^)sffocus\\b"), "");
this.parentNode.className=this.parentNode.className.replace(new RegExp("( ?|^)sfhover\\b"), "");
if(this.parentNode.parentNode.parentNode.nodeName == "LI") {
this.parentNode.parentNode.parentNode.className=this.parentNode.parentNode.parentNode.className.repl ace(new RegExp("( ?|^)sfhover\\b"), "");
if(this.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName == "LI") {
this.parentNode.parentNode.parentNode.parentNode.parentNode.className=this.parentNode.parentNode.par entNode.parentNode.parentNode.className.replace(new RegExp("( ?|^)sfhover\\b"), "");
}
}
}
}
}
// only ie needs the sfHover script. all need the accessibility script...
// thanks http://www.brothercake.com/site/resources/scripts/onload/
if(window.addEventListener) window.addEventListener('load', mcAccessible, false); // gecko, safari, konqueror and standard
else if(document.addEventListener) document.addEventListener('load', mcAccessible, false); // opera 7
else if(window.attachEvent) { // win/ie
window.attachEvent('onload', sfHover);
window.attachEvent('onload', mcAccessible);
} else { // mac/ie5
if(typeof window.onload == 'function') {
var existing = onload;
window.onload = function() {
existing();
sfHover();
mcAccessible();
}
} else {
window.onload = function() {
sfHover();
mcAccessible();
}
}
}
//--><!]]></script>
<style type="text/css">
* {margin: 0; padding: 0;}
body {background: #003333; font-size: 10px; padding: 1% 10%;}
#maincontainer {}
#nav, #nav ul {list-style: none;}
#nav li {float: left; width: 20%; display: block;}
#nav li a {display: block; background: #eee;}
#nav li ul {position: absolute; width: 13em; margin-left: -1000em;}
#nav li ul li {width: 13em;}
#nav li ul ul {margin: -1em 0 0 -1000em;}
#nav li:hover ul ul, #nav li.sfhover ul ul {margin-left: -1000em;}
#nav li:hover ul, #nav li.sfhover ul {margin-left: 0;}
#nav li li:hover ul, #nav li li.sfhover ul {margin-left: 13em;}
#nav li a:focus + ul { margin-left: 0; }
#nav li li a:focus + ul { margin-left: 1013em; }
#nav li li a:focus { margin-left:1000em; width:13em;}
#nav li li li a:focus {margin-left: 2013em; width: 13em;}
#nav li:hover a:focus, #nav li.sfhover a.sffocus { margin-left: 0; }
#nav li li:hover a:focus + ul, #nav li li.sfhover a.sffocus + ul { margin-left: 13em; }
#middle {background: #fff; padding: 1%; clear: left;}
#right {float: right; width: 25%;}
#content {float: left; width: 75%;}
</style>
<!--[if IE 6]>
<style type="text/css">
#middle {width: 98%;}
#right: width: 24%;}
#content {width: 74%;}
</style>
<![endif]-->
</head>
<body>
<div id="maincontainer">
<h1>Heading 1</h1>
<p>Tagline</p>
<ul id="nav">
<li><a href="">Link 1</a>
<ul>
<li><a href="">Link 1</a></li>
<li><a href="">Link 2</a></li>
<li><a href="">Link 3</a></li>
</ul>
</li>
<li><a href="">Link 2</a>
<ul>
<li><a href="">Link 1</a></li>
<li><a href="">Link 2</a></li>
<li><a href="">Link 3</a></li>
</ul>
</li>
<li><a href="">Link 3</a>
<ul>
<li><a href="">Link 1</a></li>
<li><a href="">Link 2</a></li>
<li><a href="">Link 3</a></li>
</ul>
</li>
<li><a href="">Link 4</a>
<ul>
<li><a href="">Link 1</a></li>
<li><a href="">Link 2</a></li>
<li><a href="">Link 3</a></li>
</ul>
</li>
<li><a href="">Link 5</a>
<ul>
<li><a href="">Link 1</a></li>
<li><a href="">Link 2</a></li>
<li><a href="">Link 3</a></li>
</ul>
</li>
</ul>
<div id="middle">
<div id="content">
<p>
*** sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In mauris mauris, sagittis at, lobortis eget, elementum eget, elit. Ut vitae ligula. In risus. In enim nulla; consequat ut, consequat et, luctus ac, quam. Ut mattis elit at odio. Vivamus sed augue sit amet ligula vestibulum molestie? Vivamus at magna et nisi fermentum elementum. Etiam porta tortor ut massa. Praesent id enim a mi lacinia mattis? Curabitur at dui! Nulla lacus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas mauris urna, posuere quis, accumsan non, ornare et; ligula. Vestibulum risus justo, suscipit ac, mattis non, feugiat quis, massa. Vestibulum massa risus, pharetra aliquam, eleifend dictum, molestie sit amet, nulla. Suspendisse posuere, felis vel iaculis suscipit, neque massa porta justo, ut ullamcorper dui nisl tincidunt mauris. Nullam in quam sed nisi hendrerit molestie. Quisque eu turpis non arcu porta sollicitudin. Sed id massa id est varius hendrerit.
</p>
<p>
Aliquam orci augue, scelerisque vel, gravida eu, pellentesque a; est. Suspendisse potenti. Aenean et dui a diam mattis posuere. Nam in mauris. Aliquam sem nibh, lobortis ornare, pharetra eget, facilisis at, tellus. Praesent ultricies facilisis neque. Nullam feugiat, neque in fringilla adipiscing, velit leo tincidunt felis, ut mattis felis orci ut elit. Aliquam eget dui sit amet dui luctus sollicitudin. Fusce ullamcorper vestibulum nisi. Mauris adipiscing luctus elit. Phasellus sed sem sed urna auctor varius! Etiam odio nunc, egestas at, elementum sed, ultricies eget; neque? Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec egestas. Pellentesque felis neque, elementum posuere, commodo et, commodo vitae, mauris! Praesent a pede a velit laoreet elementum. Aenean laoreet, lacus a lobortis tempor, dui est sagittis augue, id venenatis tellus mauris placerat nunc.
</p>
<p>
Pellentesque mauris eros, tempor sit amet, blandit in, suscipit nec, lacus. In nisi metus, ullamcorper ut, condimentum ut, viverra non, augue. Cras mauris? Integer suscipit accumsan risus. Aliquam eget sem? In hac habitasse platea dictumst. Nam fermentum tellus sed felis. Nullam consequat condimentum nisl. Aliquam convallis, eros sit amet condimentum sagittis, ipsum purus lobortis est, eget pulvinar leo nisi in tellus? Curabitur facilisis erat nec leo. Pellentesque vitae purus at diam rutrum laoreet. Aliquam commodo neque ut nunc. Donec leo sem, facilisis a, gravida sed; tristique vitae, purus. Donec ante lorem, venenatis vel, mattis vitae, pulvinar nec, urna. Curabitur laoreet sem eget nisi faucibus sagittis.
</p>
</div>
<div id="right">
<p>
*** sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In mauris mauris, sagittis at, lobortis eget, elementum eget, elit. Ut vitae ligula. In risus. In enim nulla; consequat ut, consequat et, luctus ac, quam. Ut mattis elit at odio. Vivamus sed augue sit amet ligula vestibulum molestie? Vivamus at magna et nisi fermentum elementum. Etiam porta tortor ut massa. Praesent id enim a mi lacinia mattis? Curabitur at dui! Nulla lacus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas mauris urna, posuere quis, accumsan non, ornare et; ligula. Vestibulum risus justo, suscipit ac, mattis non, feugiat quis, massa. Vestibulum massa risus, pharetra aliquam, eleifend dictum, molestie sit amet, nulla. Suspendisse posuere, felis vel iaculis suscipit, neque massa porta justo, ut ullamcorper dui nisl tincidunt mauris. Nullam in quam sed nisi hendrerit molestie. Quisque eu turpis non arcu porta sollicitudin. Sed id massa id est varius hendrerit.
</p>
</div>
<hr style="clear: both;" />
</div>
</div>
</body>
</html>