CSS problem with IE8

HTML & CSS
1

I have a menu based on liveMenu (Sourceforge) at www.hostpolicyresearch.com. It is fine in all browsers I have tried (even IE6 and 7) except IE8. In IE8 where I have a menu or submenu item on two lines sometimes I get no bottom border.

Can anyone suggest what I need to do the get IE8 to fall into line, please? Thanks :slight_smile:

My CSS is:

#vertical-menu-container {
    float: left;
    width: 200px;
}

.lm-menu {
    list-style-type: none;
    padding-left: 0;
    margin-left: 0;
}
.lm-submenu {
    display: none;
    list-style-type: none;
    position: relative;
    margin: 0;
    padding-left: 0;
}
.lm-container {
    position: absolute;
    top: -1000px;
    overflow: hidden;
    visibility: hidden;
    margin: 0;
    padding: 0;
}
/* Konqueror and IE6 need this to slide horizontal submenus correctly: */
.lm-submenu.lm-horizontal {
    float: left;
}

.lm-horizontal li {
    float: left;
}

.lm-menu li, 
.lm-submenu li {
    /* Should be specified in order to prevent ie6 unpredictable behaviour */
    width: 80px;
    background: transparent url(bogus); /* url(bogus) is a fix for IE */
}
.lm-menu li a, 
.lm-submenu li a {
    display: block;
}

.lm-menu li {
    background: #381f65;
    background: -moz-linear-gradient(top, #381f65 0%, #4e2b8c 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#381f65), color-stop(100%,#4e2b8c));
    background: -webkit-linear-gradient(top, #381f65 0%,#4e2b8c 100%);
    background: -o-linear-gradient(top, #381f65 0%,#4e2b8c 100%);
    background: -ms-linear-gradient(top, #381f65 0%,#4e2b8c 100%);
    background: linear-gradient(to bottom, #381f65 0%,#4e2b8c 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#381f65', endColorstr='#4e2b8c',GradientType=0 );
    padding: 1px;
    margin-bottom: 1px;
    width: 200px;
}
.lm-submenu li {
    background: #4e2b8c;
    background: -moz-linear-gradient(top, #4e2b8c 0%, #6437b3 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4e2b8c), color-stop(100%,#6437b3));
    background: -webkit-linear-gradient(top, #4e2b8c 0%,#6437b3 100%);
    background: -o-linear-gradient(top, #4e2b8c 0%,#6437b3 100%);
    background: -ms-linear-gradient(top, #4e2b8c 0%,#6437b3 100%);
    background: linear-gradient(to bottom, #4e2b8c 0%,#6437b3 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4e2b8c', endColorstr='#6437b3',GradientType=0 );
    padding: 1px;
    margin-bottom: 1px;
    width: 200px;
}
.lm-submenu.lm-horizontal li {
    width: 200px;
}

.lm-menu li a, 
.lm-submenu li a {
    text-decoration: none;
    color: #fff;
    margin-right: 7px;
    padding: 5px;
}

A simplified menu is:

<div id="vertical-menu-container">
  <ul id="liveMenu" class="lm-vertical lm-menu">
    <li><a href=".">home page</a></li>
    <li><a href="expertise-circles.php">expertise: subject circles...</a>
      <ul class="lm-vertical lm-right lm-submenu">
        <li><a href="expertise-apprenticeships-skills-competitions.php">apprenticeships/skills competitions</a></li>
        <li><a href="expertise-disadvantaged-groups-neets.php">disadvantaged groups/NEET</a></li>
        <li><a href="expertise-employment-and-labour-market.php">employment and labour market</a></li>
        <li><a href="expertise-further-education-and-skills.php">further education and skills</a></li>
      </ul>
    </li>
    <li><a href="clients.php">our clients</a></li>
    <li><a href="projects.php">projects and consultations...</a>
      <ul class="lm-vertical lm-right lm-submenu">
        <li><a href="projects-current-projects.php">current projects</a></li>
        <li><a href="projects-recent-projects.php">recently completed projects</a></li>
      </ul>
    </li>
    <li><a href="publications.php">HOST&rsquo;s publications...</a>
      <ul class="lm-vertical lm-right lm-submenu">
        <li><a href="publications-research-and-guidance.php">HOST research and guidance series</a></li>
        <li><a href="publications-published-research.php">recently published HOST research</a></li>
        <li><a href="publications-older-published-research.php">older published HOST research</a></li>
      </ul>
    </li>
    <li><a href="corporate-social-responsibility.php">corporate social responsibility</a></li>
    <li><a href="working.php">working with HOST...</a>
      <ul class="lm-vertical lm-right lm-submenu">
        <li><a href="working-supporting-clients.php">supporting clients</a></li>
        <li><a href="working-in-partnership.php">working in partnership</a></li>
        <li><a href="working-for-host.php">working for HOST</a></li>
        <li><a href="working-in-wales.php">gweithio yng Nghymru / working in Wales</a></li>
        <li><a href="ethics.php">research ethics</a></li>
      </ul>
    </li>
  </ul>
</div>
2

Hi,

The problem is caused by the IE gradfent filters (yet again) and if you remove them from the list styles the gap appears as normal.

Alternatively use a bottom border instead of a margin and it will work in IE with the filters.

e.g.


.lm-menu li {
	background: #381f65;
	background: -moz-linear-gradient(top, #381f65 0%, #4e2b8c 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#381f65), color-stop(100%,#4e2b8c));
	background: -webkit-linear-gradient(top, #381f65 0%,#4e2b8c 100%);
	background: -o-linear-gradient(top, #381f65 0%,#4e2b8c 100%);
	background: -ms-linear-gradient(top, #381f65 0%,#4e2b8c 100%);
	background: linear-gradient(to bottom, #381f65 0%,#4e2b8c 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#381f65', endColorstr='#4e2b8c',GradientType=0 );
	padding: 1px;
[B]	margin-bottom: 0;
	border-bottom:1px solid #fff;[/B]
	width: 200px;
}
.lm-submenu li {
	background: #4e2b8c;
	background: -moz-linear-gradient(top, #4e2b8c 0%, #6437b3 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4e2b8c), color-stop(100%,#6437b3));
	background: -webkit-linear-gradient(top, #4e2b8c 0%,#6437b3 100%);
	background: -o-linear-gradient(top, #4e2b8c 0%,#6437b3 100%);
	background: -ms-linear-gradient(top, #4e2b8c 0%,#6437b3 100%);
	background: linear-gradient(to bottom, #4e2b8c 0%,#6437b3 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4e2b8c', endColorstr='#6437b3',GradientType=0 );
	padding: 1px;
	[B]margin-bottom: 0;
	border-bottom:1px solid #fff;[/B]
	width: 200px;
}

In my opinion the solid white border looks much better than the transparent gap you had but if you want that gap in other browsers to be transparent then give the above changesd to IE8 and under only using conditional comments.

3

Thanks as always Paul. I agree about the transparent gap - Iā€™d forgotten about it!