I have the answer.
The problem is the white space in the HTML. Take this code from my example
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Updated Suckerfish</title>
<style type="text/css">
*{margin:0;padding:0;}/*Resets margins and paddings on the page. Easier to work with*/
#nav
{
list-style:none;/*No bullets*/
text-align:center;/*Allows horizontal centtering of the list items*/
background:blue;/*Visual*/
}
#nav li:hover{background:green;}
#nav li
{
display:-moz-inline-box;/*FF2 support*/
display:inline-block;/*Lay it out inline, but retain block qualities. I can still center
it via text-align*/background:red;
position:relative;/*New stacking context for the submenu which is AP'd*/
}
#nav li a
{
text-decoration:none;/*Remove the underline*/
color:#000;/*Color black*/
padding:5px 10px;/*Visual*/
line-height:30px;/*Vertical text centering*/
height:30px;/*Vertical text centering*/
border:1px solid blue;/*Border to seperate the items*/
}
#nav li li a
{
background:red;/*Different background to distinguish it is a submenu. Visual*/
}
#nav li li a:hover
{
background:purple;/*Just show hover state.*/
}
#nav li ul
{
position:absolute;/*Allow for the dropdown to work and work with it easily*/
top:100%;/*Move it vertically 100% of the <li>. Stable method*/
left:0;/*Set a left coordinate instead of relying on auto positioning.*/
margin-left:-999em;/*Move it off the screen with a huge negative left margin. Very
stable*/
}
#nav li li
{
float:none;/*Unfloat it so it doesnt go in a line*/
list-style:none;/*Remove bullets*/
}
#nav li:hover
{
visibility:visible;/*Fix an IE7 sticky bug*/
}
#nav li:hover ul, #nav li.over ul
{
margin-left:0;/*Set the left margin to 0 on hover, and the JS hover.*/
}
</style>
<!--[if lt IE 8]>
<style type="text/css">
#nav li
{
display:inline;/*Setting it up to support inline-block;*/
}
</style>
<![endif]-->
<!--if lt IE 7]>
<script type="text/javascript">
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="li") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;
</script>
<![endif]-->
</head>
<body>
<ul id="nav"><li><a href="#">Home</a></li><li><a href="#">About</a><ul><li><a
href="#">Sublink1</a></li><li><a href="#">Sublink2</a></li>
<li><a href="#">Sublink3</a></li><li><a href="#">Sublink4</a></li></ul></li><li><a
href="#">Contact</a></li><li><a href="#">Articles</a><ul><li><a
href="#">Sublink1</a></li><li><a href="#">Sublink2</a></li><li><a
href="#">Sublink3</a></li><li><a href="#">Sublink4</a></li></ul></li><li><a
href="#">Random</a></li></ul>
</body>
</html>
I removed the white space and look! Nothing is wrong. And inline-block wasn't the cause. inline-table caused tihs example too.
You have the fix now 
. Gosh that was hard lol.
Time to update my example
Edit:
If the posting screws it up, remove ALL the whitespace in the HTML
]
Originally Posted by jameshopkins
Bookmarks