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 :D

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

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