Image

Imageduhkneez wrote in Imagewebdev

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:

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

Image
This is how it's supposed to look

Image
How it looks on IE 5.5

Image
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 :)