looks fine in Firefox, but in IE 7 this line (<div id="events">Events, Materials, and Seeker Informaton</div>) is moved over to the right.

The problem happens after the end if the first </ul>

Anyone know the IE hack for this one?

Thanks for you help.


markup:
<div id="navigation">

<span id="investigation">The following pages are offered for you further investigation/span><br />
<span id="introduction">Introduction to MasterPath and the Light and Sound Teachings</span><br />
<ul>
<li id="cuttingedge"><a href="#">Light and Sound is the Cutting Edge of Spirituality</a></li>
<li><a href="#">The Human Dilemna of the Honest Spiritual Seeker</a></li>
<li><a href="#">Distinctions Between Prayer, Meditation, and Contmplation</a></li>
</ul>
<div id="events">Events, Materials, and Seeker Informaton</div>
<ul>
<li><a href="#">Video Clips of<br />Sri Gary Olsen</a></li>
<li><a href="#">Introductory Materials</a></li>
<li><a href="#">Calendar of MasterPath Meetings</a></li>
</ul>
</div>



css:
#navigation {
background: #CFF;
width: 620px;
height: 190px;
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
background-image: url('images/navline.gif');
background-repeat: no-repeat;
}
#navigation #investigation {
font-family: Arial, Helvetica, sans-serif;
font-size: 11.5px;
font-weight: bold;
color: #009;
pdding: 0;
margin: 0;
padding-top: 20px;
line-height: 30px;
margin-left: 10px;
}
#navigation #introduction {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #009;
padding: 0;
margin: 0;
padding-top: 100px;
margin-left: 15px;
}

#navigation #events {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #009;
padding: 0;
margin: 0;
padding-top: 70px;
padding-left: 0px;
margin-top: 0;
margin-left: 15px;
}