Problem with CSS navigation in IE.

Hello. I'm doing a navigation for the site and have a problem.

I'm not very good with coding, but know the basics.

The problem is with CSS navigation in IE, being rendered improperly. Would appreciate if some code gurus could help

Firefox works fine, but IE is being an ass!

The navigation in IE is indented all the way to the right and that is bad.

I attached images so you can see Good(firefox) and Bad(IE).

BAD
http://i68.photobucket.com/albums/i2/RealConnections/bad.gif
GOOD
http://i68.photobucket.com/albums/i2/RealConnections/good-1.gif

Here's How the CODE looks like.

HTML:

<div id="lower">

<div id="wrap1">
<div id="corners1"></div>
<ul id="rightnav">
<li>
<a href="subitem1.html">Level 1 </a>
<ul>
<li>
<a href="" class="level2active">Level 2 </a>
<ul>
<li class="sublev3"><a href="">Level 3</a></li>
<li class="sublev3"><a href="">Level 3</a></li>
<li class="sublev3"><a href="">Level 3</a></li>
<li class="sublev3"><a href="">Level 3</a></li>
<li class="sublev3"><a href="" class="active">Level 3 </a></li>
<li class="sublev3"><a href="">Level 3</a></li>
<li class="sublev3"><a href="">Level 3</a></li>
</ul>
</li>
</ul>
</li>
<li class="sublev"><a href="subitem2.html">Level 2</a></li>
<li><a href="subitem3.html">Level 2 </a></li>
<li><a href="subitem4.html">Level 2 </a></li>
<li><a href="subitem5.html">Level 2 </a></li>
<li><a href="subitem5.html">Level 2 </a></li>
<li><a href="subitem5.html">Level 2 </a></li>
<li><a href="subitem5.html">Level 2 </a></li>
</ul>
<div id="corners2"></div>
</div>

-----------------------------------------------------------

CSS

#lower{
clear:both;
border-left:1px solid #605f5d;
border-right:1px solid #605f5d;
width: 750px;
background-color:#fff;
}
#wrap1{
position:relative;
height:5px;
color:#fff;
background:url(../img/footerBg.jpg) no-repeat;
font-family: verdana, Arial, Helvetica, sans-serif;
font-size: 0.7em;
font-weight: bold;
padding-top: 5px;
padding-right: 10px;
padding-bottom: 0;
padding-left: 10px;
width: 200px;
}
#corners1{
width:200px;
height:10px;
background-image: url(../images/topcorners.jpg);
background-repeat: no-repeat;
background-position: 0px 0px;
margin-top: 10px;
}
#corners2{
width:200px;
height:10px;
background-image: url(../images/bottomcorners.jpg);
background-repeat: no-repeat;
background-position: left top;
}

#rightnav{
padding:0;
margin:0;
font-family:Helvetica,Arial,Geneva,Verdana,sans-serif;
font-size:8pt;
list-style: none;
width:200px;
border-left:2px solid #e2e2e2;
border-right:2px solid #e2e2e2;
position: relative;
}
#rightnav ul {
padding-left: 15px;
}

#rightnav li a {
border-bottom:1px solid #E8E7DB;
display:block;
position:relative;
padding-top: 6px;
padding-right: 10px;
padding-bottom: 6px;
padding-left: 5px;
color: #003366;
}
#rightnav li a:hover,#rightnav li a:active {
text-decoration:underline;
}
#rightnav a:link, #rightnav a:visited {
text-decoration:none;
}
#rightnav li.active a {
background:#E8E7DB none repeat scroll 0% 0%;
font-weight:bold;
border: none;
position: relative;
padding-top: 6px;
padding-right: 10px;
padding-bottom: 6px;
padding-left: 5px;
}
#rightnav li {
display: block;
margin: 0;
position: relative;
padding-top: 6;
padding-right: 10;
padding-bottom: 6;
padding-left: 5;
}
#rightnav li.sublev {
border-top:1px solid #E8E7DB;
}

#rightnav li ul li ul li.sublev3 {
border: none;
}
#rightnav li ul li ul li.sublev3 a {
border: none;
color: #666666;
font-weight: normal;
}

#rightnav li ul li ul li.sublev3 a.active {
border: none;
color: #3499CC;
padding-left: 12px;
text-decoration: underline;
font-weight: bold;
}

#rightnav li ul li a.level2active {
background-color: #E8FFFF;
}

 

Make sure all your ul's and li's got margin:0. I can tell you with 95% probability that's the source of trouble.

 

hey thanks for answer.

Fixed the problem. Not sure what it was, but I married two codes of navigation, one that worked and one that didn't. Probably a bloat in terms of validation but it works