Skipping lines on IE -- Please help
Hi everyone,
I am working on a web site using Drupal. I've tested on several browsers and the layout is pretty much as it should EXCEPT for IE 5.5 and IE 6.0 on Windows.
The URL: http://imagingnetworkontario.ca/drupal/
On IE 5.5 and 6.0, the left sidebar text skips lines and it shouldn't. I tried several things and I was wondering if anyone else can take a look at my code to see how to fix it?
The HTML:
The (inelegant/redundant) CSS:
Some screen shots:

This is how it's supposed to look

How it looks on IE 5.5

How it looks on IE 6.0
Please help! My eyes are going to bulge out soon trying to fix this :(
cross-posted
EDIT: Thanks for the replies, everyone! I have yet to try the solutions offered. This mini project's put on hold for now while I work on other stuff. Will let you know how it turns out :)
I am working on a web site using Drupal. I've tested on several browsers and the layout is pretty much as it should EXCEPT for IE 5.5 and IE 6.0 on Windows.
The URL: http://imagingnetworkontario.ca/drupal/
On IE 5.5 and 6.0, the left sidebar text skips lines and it shouldn't. I tried several things and I was wondering if anyone else can take a look at my code to see how to fix it?
The HTML:
<div id="sidebar-left">ImNO
<ul class="menu">
<li class="expanded"><a href="/drupal/?q=node/2" class="active">Symposium</a>
<ul class="menu">
<li class="leaf"><a href="/drupal/?q=node/7">Abstracts</a></li>
<li class="leaf"><a href="/drupal/?q=node/8">Accommodation</a></li>
<li class="leaf"><a href="/drupal/?q=node/9">Committee</a></li>
<li class="leaf"><a href="/drupal/?q=node/10">Program</a></li>
<li class="leaf"><a href="/drupal/?q=node/5">Registration</a></li>
</ul>
</li>
<li class="leaf"><a href="/drupal/?q=node/1">About ImNO</a></li>
<li class="leaf"><a href="/drupal/?q=node/3">Funded Partnerships</a></li>
<li class="leaf"><a href="/drupal/?q=node/4">Career Centre</a></li>
</ul>
</div>
The (inelegant/redundant) CSS:
#imno #sidebar-left {
margin: 0px;
clear: none;
float: left;
width: 140px;
padding-top: 5px;
padding-left: 40px;
list-style-type: none;
list-style-image: none;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size:14px;
text-decoration:none;
color: #FFFFFF;
}
#imno #sidebar-left ul {
list-style-type: none;
list-style-image: none;
padding: 0px;
margin:0px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size:14px;
line-height:20px;
text-decoration:none;
}
#imno #sidebar-left li {
list-style-type: none;
list-style-image: none;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size:14px;
line-height:20px;
text-decoration:none;
}
#imno #sidebar-left a {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size:14px;
line-height:20px;
text-decoration:none;
display: block;
color: #465685;
}
#imno #sidebar-left a:visited {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size:14px;
line-height:20px;
text-decoration:none;
text-decoration:none;
color: #465685;
}
#imno #sidebar-left a:hover {
color: #eab687;
}
#imno #sidebar-left .menu {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size:14px;
line-height:20px;
text-decoration:none;
}
#imno #sidebar-left .expanded {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size:14px;
line-height:20px;
text-decoration:none;
}
#imno #sidebar-left .leaf {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size:14px;
line-height:20px;
text-decoration:none;
}
#imno #sidebar-left .collapsed {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size:14px;
line-height:20px;
text-decoration:none;
}
#imno #sidebar-left .active {
color: #c7695c;
}Some screen shots:
This is how it's supposed to look
How it looks on IE 5.5
How it looks on IE 6.0
Please help! My eyes are going to bulge out soon trying to fix this :(
cross-posted
EDIT: Thanks for the replies, everyone! I have yet to try the solutions offered. This mini project's put on hold for now while I work on other stuff. Will let you know how it turns out :)
