Hi
I have a page here which combines a little bit of javascript to open and close a vertical menu I'm working on:
http://www.nexbridge.co.uk/sidenav.asp
I thought I'd done everything in the stylesheet to ensure that the margin for the <li> links was 0 (as it is in Firefox), but IE indents them.
Can you spot anything obvious?
HTML:
<%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="css/sidenav.css" />
<script src="css/faq.js" type="text/javascript"></script>
</head>
<body>
<p><a href="#" onClick="expandcontent('sc1');return false">Item 1</a></p>
<div id="sc1" class="switchcontent">
<div id="listmenu">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</div>
</div>
<p><a href="#" onClick="expandcontent('sc2');return false">Item 2</a></p>
<div id="sc2" class="switchcontent">
<div id="listmenu">
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
<li><a href="#">Link 6</a></li>
</ul>
</div>
</div>
</body>
</html>
CSS
* {margin:0; padding:0;}
body {
font-family: verdana, arial, sans-serif;
font-size:100%;
behavior: url(css/csshover.htc);
text-align: left;
}
div#listmenu {
font-size:.8em;
}
#listmenu ul {
margin:0 0 0 30px;
}
#listmenu li {
margin: 0 0 1px 1px;
list-style-type: none;
}
#listmenu li a, #listmenu li a:link, #listmenu li a:visited, #listmenu li a:active {
display:block;
margin: 0;
padding: 2px 2px 2px 6px;
width: 200px;
text-decoration:none;
color:#069;
background-color: #EEE;
border-left: 4px solid #CCC;
}
#listmenu li a:hover {
background-color: #FC3;
}
Before you post, read our: 
