kentaromiura/mootools.1.3beta.document.id.margin.left.IE.glitch.html

## mootools.1.3beta.document.id.margin.left.IE.glitch.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style>
*{
    margin:0;padding:0;border:0;
}
body {
    font-size:1em;
}

.myPage {
    width:100%;
    height:100%;
    background-color:rgb(233,233,233);
}

.myPage .list {
    background-color:White;
    height:94%;
    margin:2%;
}
.myPage .list h3 {
    padding:0.3em;
}

.myPage .list ul{
    list-style-type:none;
    vertical-align:middle;
}
.myPage .list ul li{
font-family:Verdana;
}
.myPage .list ul li ul{
    font-size:80%;
}
.selected{
    background-color: lightsteelblue;
}

.myPage .list ul li span,.divisor{
    cursor:pointer;

    height:2.5em;
    padding-left:1em;
    width:90%!important;
    margin-left:3em; /* |BUG| */

    padding-top:0.6em;
    border-bottom:1px solid black;
}
.myPage .list ul li span.selected{
    font-weight:bold;
}
.divisor{
    padding:0.3em;
    margin-bottom:0.3em;
    color:White;
    font-weight:bold;
    font-family:'Trebuchet MS',Verdana;
    padding-left:3em;
    margin:0.3em;

}
li ul li {
    margin-left:4em!important;
}
li ul .divisor{
    background-color:gray;
    color:Black;
}
.myList{
    position:relative!important;
    top:0;
    left:0;
}
</style>
<script src="mootools-core-1.3b1.1.js"></script>
<script>
    function enableBug() {
        alert('As soon as you click on OK\n I will fire document.id on the UL#bugInitializer');
        $("bugInitializer");
    }
    setTimeout("enableBug()", 3000);
</script>
</head>
<body>
    <div class="myPage">
        <div class="list myList">
            <h3>Example of document.id bug on IE7/ IE8</h3>
            <ul id="bugInitializer">
                <li id="categoria" class="myList">
                    <span class="selected">My Program Menu</span>
                    <ul>
                        <li class="divisor"><a name="goto_52A">F</a></li>
                        <li><span >First</span></li>
                        <li class="divisor"><a name="goto_52S">S</a></li>
                        <li><span >Second</span></li>
                        <li class="divisor"><a name="goto_52V">T</a></li>
                        <li><span >Third</span></li>
                    </ul>
                </li>
                </ul>
        </div>
    </div>
</body>
</html>
	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
	<html>
	<head>
	<style>
	*{
	margin:0;padding:0;border:0;
	}
	body {
	font-size:1em;
	}

	.myPage {
	width:100%;
	height:100%;
	background-color:rgb(233,233,233);
	}

	.myPage .list {
	background-color:White;
	height:94%;
	margin:2%;
	}
	.myPage .list h3 {
	padding:0.3em;
	}

	.myPage .list ul{
	list-style-type:none;
	vertical-align:middle;
	}
	.myPage .list ul li{
	font-family:Verdana;
	}
	.myPage .list ul li ul{
	font-size:80%;
	}
	.selected{
	background-color: lightsteelblue;
	}

	.myPage .list ul li span,.divisor{
	cursor:pointer;

	height:2.5em;
	padding-left:1em;
	width:90%!important;
	margin-left:3em; /* \|BUG\| */

	padding-top:0.6em;
	border-bottom:1px solid black;
	}
	.myPage .list ul li span.selected{
	font-weight:bold;
	}
	.divisor{
	padding:0.3em;
	margin-bottom:0.3em;
	color:White;
	font-weight:bold;
	font-family:'Trebuchet MS',Verdana;
	padding-left:3em;
	margin:0.3em;

	}
	li ul li {
	margin-left:4em!important;
	}
	li ul .divisor{
	background-color:gray;
	color:Black;
	}
	.myList{
	position:relative!important;
	top:0;
	left:0;
	}
	</style>
	<script src="mootools-core-1.3b1.1.js"></script>
	<script>
	function enableBug() {
	alert('As soon as you click on OK\n I will fire document.id on the UL#bugInitializer');
	$("bugInitializer");
	}
	setTimeout("enableBug()", 3000);
	</script>
	</head>
	<body>
	<div class="myPage">
	<div class="list myList">
	<h3>Example of document.id bug on IE7/ IE8</h3>
	<ul id="bugInitializer">
	<li id="categoria" class="myList">
	<span class="selected">My Program Menu</span>
	<ul>
	<li class="divisor"><a name="goto_52A">F</a></li>
	<li><span >First</span></li>
	<li class="divisor"><a name="goto_52S">S</a></li>
	<li><span >Second</span></li>
	<li class="divisor"><a name="goto_52V">T</a></li>
	<li><span >Third</span></li>
	</ul>
	</li>
	</ul>
	</div>
	</div>
	</body>
	</html>