Problem with CSS navigation in IE.

[Ivan2012]

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).

Would really appreciate any help. Been pocking this thing for 3 hours still cant figure...

BAD

GOOD


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;
}

[rangana]

Try to add this conditional comment (for IE):

<!--[if IE]>
<style type="text/css">
#rightnav ul {
padding-left: 0px;
margin-left:15px;
}
</style>
<![endif]-->

[Ivan2012]

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

Thanks for your suggestion though.