content position IE problem

[george61]

Hi guys I've stumbled upon a really annoying problem in positioning 4 oval boxes(containers) (in 2 rows). In FF and Chrome it looks exactly how I want but in IE the boxes align about 50px left. If I give margin or padding left no matter of the values it shifts the boxes many pixels right.This is the HTML.

<ul class="contin">
					<li><img src="images/homecontainer.png"/></li>
					<li><img src="images/homecontainer.png"/></li>
				</ul>
				
				<ul class="new">
					<li><b><a href="">New Games</a></b></li>
					<li><b><a href="">Featured</a></b></li>
				</ul>

				<ul class="vid">
					<li><b><a href="">New Videos</a></b></li>
					<li><b><a href="">Featured</a></b></li>
				</ul>
				
				<ul class="oxycontin">
				<li><img src="images/homecontainer.png"/></li>
				<li><img src="images/homecontainer.png"/></li>
				</ul>
				
				<ul class="neww">
					<li><b><a href="">New Jokes</a></b></li>
					<li><b><a href="">Featured</a></b></li>
				</ul>

				<ul class="vidd">
					<li><b><a href="">New Pictures</a></b></li>
					<li><b><a href="">Featured</a></b></li>
				</ul>
				
			<div class="nums">
				<img src="images/numm1.png" name="as" width="40">
				<img src="images/numm2.png" name="af" width="40">
				<img src="images/numm3.png" name="ad" width="40">
			</div>
				
			<div class="numr">
				<img src="images/numm1.png" name="asg" width="40">
				<img src="images/numm2.png" name="afg" width="40">
				<img src="images/numm3.png" name="adg" width="40">
		        </div>
				
			<div class="numt">
				<img src="images/numm1.png" name="asf" width="40">
				<img src="images/numm2.png" name="aff" width="40">
				<img src="images/numm3.png" name="adf" width="40">
			</div>
				
			<div class="numy">
				<img src="images/numm1.png" name="ash" width="40">
				<img src="images/numm2.png" name="afh" width="40">
				<img src="images/numm3.png" name="adh" width="40">
			</div>

This is the CSS:

.contin{
			margin: 0 auto;
			position: relative;
			margin-top: 40px;
			white-space: nowrap;
			}
			.contin li{
			margin-left: -50px;
			display: inline;
			}
			.new, .neww{
			margin-left: 40px;
			position: relative;
			font: 16px arial;
			color: white;
			white-space: nowrap;
			}
			.new{
			font-family: Consolas, Verdana, sans-serif;
			font-size: 18px;
			color: white;
			margin-top: -344px;
			}
			.neww{
			font-family: Consolas, Verdana, sans-serif;
			font-size: 18px;
			color: white;
			margin-top: -345px;
			}
			.new li, .neww li{
			margin-left: 20px;
			display: inline;
			}
			.vid, .vidd{
			font-family: Consolas, Verdana, sans-serif;
			font-size: 18px;
			color: white;
			margin-left: 400px;
			position: relative;
			color: white;
			white-space: nowrap;
			}
			.vid, .vidd{
			margin-top: -42px;
			}
			.vid li, .vidd li{
			margin-left: 20px;
			display: inline;
			}
			.oxycontin{
			margin: 0 auto;
			position: relative;
			margin-top: 300px;
			white-space: nowrap;
			}
			.oxycontin li{
			margin-left: -50px;
			display: inline;
			}
			.nums{
			position: relative;
			margin-left: 180px;
			margin-top: -130px;
			}
			.numr{
			position: relative;
			margin-left: 535px;
			margin-top: -40px;
			}
			.numt{
			position: relative;
			margin-left: 180px;
			margin-top: 300px;
			}
			.numy{
                        position: relative;
			margin-left: 535px;
			margin-top: -40px;
			}

Maybe this is not the best HTML/CSS practice for content placement. Any suggestions about making the code better and fixing the IE bug will be greatly appreciated.

[inplainsite]

I have had some success with this if I specify the width of the div in the CSS.

For Example:

.numy{
      position: relative;
      width: 120px;
      margin-left: 535px;
      margin-top: -40px;
}