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.