Forum Moderators: not2easy
What is strange, is if I remove the holly hack, then the jumping stops. I just have to bear with the 3-pixel jog which sucks.
If I put in the holly hack, the menu displays fine, however on hover of the popup, the containing <li> element experiences a downward text jog, with magical padding appearing. What gives?
I'll paste the complete code with the javascript, so that you can paste into your editor to view.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<style>#container {
margin:50px auto;
width:500px;
}
/* CSS Document */
#menu, #menu ul {
list-style:none;
padding:0;
margin:0;
}
#menu li {
position:relative;
line-height:4.5em;
width:10em;
}
#menu li ul {
position:absolute;
margin-top:-4em;
margin-left:5em; /* for IE */
display:none;
}
#menu ul li ul {
margin-top:-3em;
margin-left:7em;
}
/* ******************************************************************* */
/* SHOW SUBMENU 1 */
#menu li:hover ul, #menu li.over ul {
display:block;
}
#menu li:hover ul ul, #menu li.over ul ul {
display:none;
}
/* SHOW SUBMENU 2 */
#menu ul li:hover ul, #menu ul li.over ul {
display:block;
}
/* ******************************************************************* */
/* STYLING UP THE LINKS */
#menu a {
display:block;
border-right:1px solid #fff;
background:#E0F574;
color:#3B3B3B;
text-decoration:none;
padding:0 10px;
}
#menu a:hover {
background-color:#5798B4;
color:#fff;
}
#menu ul {
border-top:1px solid #fff;
}
#menu ul a {
border-right:none;
border-right:1px solid #fff;
border-bottom:1px solid #fff;
border-left:1px solid #fff;
background:#AEC245;
}
#menu {
z-index:1;
}
#menu ul {
z-index:2;
}
#menu ul ul {
z-index:3;
}
/* Fix IE. Hide from IE Mac \*/
* html ul li { height: 1%; }
* html ul li a { height: 1%; }
/* End */
</style>
<!--[if IE]>
<style type="text/css">
#menu li {
position:static;
}
</style>
<![endif]-->
<script type="text/javascript">
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload!= 'function') {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
}
}
}
function prepareMenu() {
if (!document.getElementsByTagName) return false;
if (!document.getElementById) return false;
if (!document.getElementById("menu")) return false;
var menu = document.getElementById("menu");
var root_li = menu.getElementsByTagName("li");
for (var i = 0; i < root_li.length; i++) {
var li = root_li[i];
var child_ul = li.getElementsByTagName("ul");
if (child_ul.length >= 1) {
li.onmouseover = function () {
if (!this.getElementsByTagName("ul")) return false;
var ul = this.getElementsByTagName("ul");
ul[0].style.display = "block";
return true;
}
li.onmouseout = function () {
if (!this.getElementsByTagName("ul")) return false;
var ul = this.getElementsByTagName("ul");
ul[0].style.display = "none";
return true;
}
}
}
return true;
}
addLoadEvent(prepareMenu);</script>
</head>
<body>
<div id="container">
<ul id="menu">
<li><a href="#" title="Homepage" class="selected">Homepage</a></li>
<li><a href="#" title="About us">About us</a></li>
<li><a href="#" title="Projects">Projects</a>
<ul>
<li><a href="#" title="Older projects">Older projects</a>
<ul>
<li><a href="#" title="2003 projects">2003 projects</a></li>
<li><a href="#" title="2004 projects">2004 projects</a></li>
<li><a href="#" title="2005 projects">2005 projects</a></li>
</ul>
</li>
<li><a href="#" title="Active projects">Active projects</a>
<ul>
<li><a href="#" title="Leaf industries">Leaf industries</a></li>
<li><a href="#" title="Omnicron">Omnicron</a></li>
<li><a href="#" title="example.com">example.com</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#" title="Contact">Contact</a></li>
</ul>
</div>
</body>
</html>
[edited by: engine at 9:52 am (utc) on Nov. 12, 2007]
[edit reason] examplified [/edit]
And it only happens when it's on a mouseover. Very strange.
I'm not seeing the 'shift on hover' in IE7, but that doesn't mean I don't believe you, because I'm seeing 'permanent' whitespace - as in no hover is required to produce the shift - I am however seeing what you describe in IE6, I'm afraid it falls into the hover ghosts and gaps [webmasterworld.com] mess!
First glance says that your width (10em), which, I think, is the 'real' trigger, might be better placed on the ul or the <a>, going with the findings that it's best to keep layout off the <li>
try
#container ul {width: 10em;} - btw, width is another way of triggering 'layout', the same as the holly hack does
[edited by: SuzyUK at 11:20 am (utc) on Nov. 15, 2007]
That didn't do the trick, as in IE6 it's still only appearing the gap, when it's hovered over. Moving things away from LI and adjusting to the <a>tag still doesn't do the trick. some parts of the holly hack just doesn't add up.
Anyway my code has gone live, and even though it's a flaw in my website, hopefully I can find an alternative [XHTML blearg!] to it soon.
Anyway, thanks again!
