I know the IE5.x way to do things was against standards, but I can not figure out a way to do certain things with standards compliant code.

Like this:
Code:
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>problem</title>
<style type="text/css">
#sampleWidth{
width:200px;
margin : 5px 0px 5px 0px; /*only top and bottom have margin*/
padding : 0px;
}
#container{
width:200px;
margin : 0px;
padding : 0px;
}
#container ul{
list-style:none;
margin:0px;
padding:0px;
width:100%;
}
#container ul li{
margin:0px;
padding:0px;
width:100%;
}
#container ul li a { 
display: block;
width:100%;
}
/*fix for ie mac*/
html>body #container ul li a {
width: auto;
}
/*Here is some visualisation that does not effect the outcome*/
body, html{
margin : 0px; 
padding : 0px; 
}
#sampleWidth{
background:#33ff00;
}
#container{
background:#33ffff;
}
#container ul li a:hover{ 
background:#ff0000;
}
</style>
</head>
<body>
<div id="sampleWidth">
everything should be 200px wide
</div>
<div id="container">
<ul>
	<li><a href="#">Sample link</a></li>
	<li><a href="#">Sample link2</a></li>
</ul>
</div>
</body>
</html>
This produces a sample page that looks the way I want it, exept that the links are a bit too left. I'd want to add padding-left to the a-tag so that the link text would be a bit more to the right.

With ie5.x this would be easy as changing the padding does not effect the width of the element.

With standards compliant browser this will cause an issue, as the outermost width of a tag is then 100% + padding and makes the section wider. I do not want this, but I do not know how to stop it from happening.